iOS-style Search Bar
A minimalist search pill that smoothly expands on focus and reveals quick-clear controls with spring animation.
K
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/ios-search-bar
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Current search query string |
| onChange | (value: string) => void | — | Input change handler |
| onSubmit | (value: string) => void | undefined | Fired when Enter is pressed |
| onClear | () => void | undefined | Callback when clear button is clicked |
| placeholder | string | 'Search...' | Placeholder label |
| collapsedWidth | number | string | '220px' | Width before focus |
| expandedWidth | number | string | '340px' | Width after focus |