```ts
import Input from "~/components/ui/Input.vue"
```
# Input
Inputs are areas in which users can enter a single-line text or a number. Several [presets](#presets) are available.
| Prop | Data type | Required? | Description |
| ------------- | --------- | --------- | --------------------------------------------------------------------------- |
| `placeholder` | String | No | The placeholder text that appears when the input is empty. |
| `icon` | String | No | The [Bootstrap icon](https://icons.getbootstrap.com/) to show on the input. |
| `v-model` | String | Yes | The text entered in the input. |
Link a user's input to form data by referencing the data in a `v-model` of type `string`.
```ts
const value = ref("Preset Value");
```
```vue-html{2}
```
## Input icons
Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its purpose more visually clear.
```vue-html{3}
```
## Label slot
```vue-html{2-4}
User name
```
User name
If you just have a string, we have a convenience prop, so instead you can write:
```vue-html
```
## Input-right slot
You can add a template on the right-hand side of the input to guide the user's input.
```vue-html{2-4}
suffix
```
suffix
## Color
See [Button](./button.md#button-colors) for a detailed overview of available props.
## Presets
### Search
```vue-html
```
### Password
```vue-html
```
::: tip
We use the spacer to simulate the baseline alignment on page layouts (64px between sections)
:::
### Add a reset option
```vue-html
```
## Fallthrough attributes
If you add attributes that are no props, they will be added to the component:
```vue-html
```