Input
Text input with optional label, help text, and icon slots.
Sizes
States
We'll never share it.
Enter a valid email address.
With an icon
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Field label. | |
| description | string | Help text under the field. | |
| error | string | Sets the error state and shows this message. | |
| size | 'sm' | 'md' | 'lg' | 'md' | Field height. |
| leadingIcon | ReactNode | Icon inside the field, before the text. | |
| trailingIcon | ReactNode | Icon inside the field, after the text. | |
| ...rest | InputHTMLAttributes<HTMLInputElement> | Every native <input> attribute. |
Why it works this way
Why
- It has a built-in visible label, because a placeholder is not a label and disappears as soon as someone types.
- Focus uses a stronger border rather than an accent ring; error uses the danger border and is unaffected by focus, so the problem stays visible while editing.
Don't
- Don't use it for a choice from a fixed list. Use Select, or Combobox for long lists.
- Don't drop the label to save space. Use size sm or an icon, and keep the label.