Input
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
With Icon#
Loading…
With Trailing#
Loading…
Error#
Loading…
Disabled#
Loading…
Sizes#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | Element rendered to the left of the input (an `IconGlyph`, `@`, etc.). |
| trailing | ReactNode | — | Element rendered to the right (a unit suffix, kbd hint, clear button). |
| error | boolean | undefined | — | When true, swaps the wrapper border to error tone (independent of `aria-invalid`). |
| width | string | number | undefined | — | Pixel width override; otherwise the wrapper grows to fill its container. |
| size | "sm" | "md" | "lg" | null | undefined | — | |
| density | "comfortable" | "touch" | null | undefined | — | |
| tone | "err" | "default" | null | undefined | — |