components
Input
A text field with optional label, hint, error, and icon slots. The input font is 16px so iOS Safari does not zoom on focus. Touch-first heights; md is 48px.
Basic
Label and hint.
As it should appear on your profile.
With icons
Error
aria-invalid is set and the message is linked via aria-describedby.
Enter a valid email address.
Sizes and disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | none | Visible label, linked to the input. |
| hint | string | none | Helper text below the field. |
| error | string | none | Error message. Overrides hint and sets aria-invalid. |
| size | ControlSize | md | sm 40px, md 48px, lg 56px. |
| leadingIcon | ReactNode | none | Icon at the start of the field. |
| trailingIcon | ReactNode | none | Icon at the end of the field. |