Component
SearchInput
A search field with a leading icon, clear button, and optional debounced changes.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/search-inputExamples
Live previews render through the docs app's PandaCSS codegen.
<SearchInput aria-label="Search" placeholder="Search…" />
<SearchInput aria-label="Search" defaultValue="design system" />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `align` | `InputAlign` | No | - | - |
| `className` | `string` | No | - | Root className. |
| `clearLabel` | `string` | No | - | Accessible label for the clear button. |
| `debounce` | `number` | No | - | Debounce (ms) applied to \`onValueChange\`. Defaults to 0 (no debounce). |
| `invalid` | `boolean` | No | - | - |
| `onValueChange` | `(value: string) => void` | No | - | Called with the current query string (debounced when \`debounce\` > 0). |
| `rootProps` | `Omit<InputRootProps, 'children' \ | 'className' \ | 'disabled' \ | 'size'>` |
| `size` | `InputSize` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/search-input.json`
- Recipe: ``
- Files: `src/components/ui/search-input.tsx`