127 Components
Search Field
InputsRounded iOS-inspired search bar with a magnifier icon, inline clear badge, quick suggestion pills, and a 'Cancel' button that slides in smoothly on focus.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/apple-search-field.json"
Props
TypeScript props supported by <AppleSearchField />.
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Search components, tokens, or docs..." | Placeholder text shown inside the search bar. |
| value | string | — | Controlled search query value. |
| defaultValue | string | "" | Initial search query for uncontrolled mode. |
| onChange | (query: string) => void | — | Callback fired whenever the search query changes. |
| onCancel | () => void | — | Callback fired when the Cancel button or Escape key is pressed. |
| suggestions | string[] | — | Quick suggestion chips displayed below the field when active. |
| className | string | — | Additional Tailwind CSS classes for the outer wrapper. |
Key Features
- Shared-layout spring compression on the input bar as the 'Cancel' button slides in from the right.
- Animated circular clear (`X`) button that appears as soon as the user types.
- Reveals filterable quick-suggestion pills while focused.
Keyboard & Accessibility
- Uses semantic `type='search'` with `Escape` key bound to clear and dismiss focus.
- Includes explicit `aria-label` on the clear button.
- Respects `prefers-reduced-motion` for layout and slide transitions.