Input
Collects a single line of text.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
4 examplesDefault
sm
md
lg
With icon
Password
Error
sm
md
lg
States
5 examplesHover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled
Error focus
Rest
Error focus
Filled
Rest
Filled
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Label rendered above the field and linked to it. |
| size | 'sm'|'md'|'lg' | 'md' | Rung on the shared control ladder: 28, 32 or 40px tall. Matches Button and IconButton at the same value, so a field and a button in one row align without further styling. |
| icon | React.ComponentType<{ size?: number, strokeWidth?: number }> | - | Optional left icon. Its glyph scales with `size` (16, 18, 20px). |
| trailingIcon | React.ComponentType<{ size?: number, strokeWidth?: number }> | - | Optional right icon. Its glyph follows the same scale as `icon`. |
| trailingIconLabel | string | - | Accessible name for the trailing control. Required when `onTrailingIconClick` is set. |
| onTrailingIconClick | (event: React.MouseEvent<HTMLButtonElement>) => void | - | Turns `trailingIcon` into a focusable button rendered after the input in the tab order. |
| error | string | - | When set, switches the field into the error state and renders the message. |
| className | string | - | Class name forwarded to the <input> element. |
| wrapperClassName | string | - | Class name forwarded to the outer wrapper. |
AI Canvas