# Input

> A text input with label, hint and error.

## Examples

### Basic

```vue
<script setup lang="ts">
const name = ref("");
</script>

<template>
  <div class="demo-field">
    <UiInput
      v-model="name"
      label="Workspace name"
      hint="Shown to everyone you invite."
      placeholder="Acme Inc."
    />
  </div>
</template>
```

### Prefix and suffix

```vue
<template>
  <div class="demo-stack demo-field">
    <UiInput label="Price" prefix="$" suffix="USD" type="number" placeholder="0.00" />
    <UiInput label="Search" type="search" placeholder="Find anything" optional>
      <template #prefix><Icon name="search" :size="14" /></template>
    </UiInput>
  </div>
</template>
```

### Validation

```vue
<script setup lang="ts">
const email = ref("ada@");
const error = computed(() =>
  /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value) ? undefined : "Enter a valid email address.",
);
</script>

<template>
  <div class="demo-field">
    <UiInput v-model="email" type="email" label="Email" :error="error" />
  </div>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Visible label, linked to the control. |
| `hint` | `string` | — | Help text under the control, announced as its description. |
| `error` | `string \| boolean` | — | `true` marks the control invalid; a string also shows it as the message, replacing the hint. |
| `prefix` | `string` | — | Text shown before the input, e.g. a currency sign. Hidden from assistive tech. |
| `suffix` | `string` | — | Text shown after the input, e.g. a unit. Hidden from assistive tech. |
| `optional` | `boolean` | `false` | Appends the `optional` translation to the label. |
| `disabled` | `boolean` | `false` | Disables the control. |
| `type` | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | `"text"` | Native input type. |
| `size` | `"medium" \| "small"` | `"medium"` | Size hook, exposed as `data-field-size`. |
| `id` | `string` | — | Id for the control; generated with `useId()` when omitted. |
| `modelValue` | `string \| number` | — | The value. |

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `[value: string \| number \| undefined]` | `v-model:modelValue` update. |

| Slot | Props | Description |
| --- | --- | --- |
| `prefix` | — | Replaces the `prefix` text, e.g. with an icon. |
| `suffix` | — | Replaces the `suffix` text. |

## Styling

- Parts (`[data-part="…"]`): `field`, `field-label`, `field-optional`, `input-control`, `input-prefix`, `input`, `input-suffix`, `field-message`
- State attributes: `data-field-size`, `data-field-error`, `data-field-tone`

## Accessibility

- Errors set `aria-invalid` and are announced.
- Prefix and suffix are hidden from screen readers, so the label has to make sense without them.