Search Field
Command-bar-style search input with optional ⌘-K shortcut chip. Five states — idle, hover, focus, text-inactive (placeholder), text-active (typed). Controlled or uncontrolled.
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/andromeda-search-fieldProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| 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