Search Field
Collects a search query, with room for a keyboard shortcut hint.
Configurations
Supported configurations for this component.
Default
Interaction states covered by the API and the style contract.
Configurations
4 examplesDefault
Custom shortcut
No shortcut
With value
sm
md
lg
Default
1 exampleAdd 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 |
|---|---|---|---|
| size | 'sm'|'md'|'lg' | 'md' | Rung on the shared control ladder: 28, 32 or 40px tall. Matches Button, IconButton and Input at the same value. |
| placeholder | string | 'Search anything' | Text shown when empty. Defaults to "Search anything". |
| shortcut | string|null | '⌘ K' | Keyboard shortcut chip. Pass null to hide. Defaults to "⌘ K". |
| icon | React.ComponentType<{ size?: number, weight?: string, color?: string, style?: React.CSSProperties }> | MagnifyingGlass | Phosphor-style leading icon. Defaults to MagnifyingGlass. Pass null to hide. |
| value | string | - | Controlled value. |
| defaultValue | string | - | Uncontrolled initial value. |
| onValueChange | (next: string) => void | - | Called when typed value changes. |
| ariaLabel | string | - | Accessible label for the input. Defaults to placeholder. |
| className | string | - | Class name forwarded to the outer wrapper. |
| style | React.CSSProperties | - | Style merged into the outer wrapper (lets the parent set width). |
| disabled | boolean | - | Disables the field: dims it to the disabled opacity, shows a not-allowed cursor, and disables the underlying input. |
AI Canvas