# I9kInput

> Single-line text input with an optional label, hint, and error state. Wires its own accessible ids, and inherits size and error state from a wrapping I9kField when there is one.

```ts
import { I9kInput } from '@9klabs/design';
```

## Examples

### Sizes

```vue
<I9kInput v-model="a" ui-size="sm" label="Small" />
<I9kInput v-model="b" ui-size="md" label="Medium" />
<I9kInput v-model="c" ui-size="lg" label="Large" />
```

### Hint and error

```vue
<I9kInput v-model="email" label="Email" hint="We never share it." />
<I9kInput v-model="email" label="Email" error="That address is not valid." />
```

## Watch out

- The visual scale prop is `uiSize`, not `size` — `size` passes through to the native input attribute.
- Inside an I9kField, omit `label`, `hint`, `error`, and `uiSize`: the field supplies them and owns the ids.

## API

### Props

| Prop | Type | Default | Required |
| --- | --- | --- | --- |
| `modelValue` | `string` | — | yes |
| `label` | `string` | `undefined` | no |
| `type` | `'text' \| 'email' \| 'password'` | `'text'` | no |
| `error` | `string \| null` | `null` | no |
| `hint` | `string` | `undefined` | no |
| `required` | `boolean` | `false` | no |
| `uiSize` | `'sm' \| 'md' \| 'lg'` | `undefined` | no |

### Emits

| Event | Payload |
| --- | --- |
| `update:modelValue` | `[value: string]` |

## Agent prompt

```text
Use I9kInput from @9klabs/design for a labelled single-line text field.

import { I9kInput } from '@9klabs/design';

Props:
- modelValue: string (required) — the v-model target.
- label?: string
- type?: 'text' | 'email' | 'password' (default 'text')
- error?: string | null (default null) — a non-null value renders the error state and wires aria-describedby.
- hint?: string
- required?: boolean (default false)
- uiSize?: 'sm' | 'md' | 'lg' — falls back to a wrapping I9kField's size, then to 'md'.

Emits: update:modelValue with the new string.

IMPORTANT: the visual scale prop is `uiSize`, NOT `size`. `size` is left free for the native HTML attribute and is forwarded to the underlying <input>.

Usage:
<I9kInput v-model="email" label="Email" type="email" ui-size="md" hint="We never share it." />
```