Search Field
Live example
Search Field
Installation
npx shadcn@latest add https://hextech-ui.vercel.app/r/search-field.jsonAPI reference
These are the main Search Field options. See the exported TypeScript types for inherited native or primitive props.
| Prop | Type | Default |
|---|---|---|
label | string (required) | — |
value / defaultValue | string | empty |
onValueChange | (value: string) => void | — |
onSearch / debounceMs | (value: string) => void / number | 300 ms |
Debounced search
onValueChange updates editing immediately. Use onSearch for filtering or requests and set debounceMs to delay that callback. Keep value paired with onValueChange for controlled text, or use defaultValue. Cancel stale requests in your data layer.