## Search Field (S—076)

A search input with a / shortcut, recent searches on focus, live match count and a clear button that pops in.

- URL: https://sundaeui.dev/components/search-field
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/search-field.json`
- Tags: autocomplete, shortcut, filter, search, recent, input

Press / anywhere to focus it. Empty, it shows recent searches you can pick or remove; typing filters a list and shows how many matched, with matches highlighted.
The clear button scales in only when there is text, and Escape clears then blurs.

### Usage

```tsx
import { SearchField } from '@/components/sundae/search-field'

<SearchField />
```

### Props

- `items` (`string[]`, required): Searchable strings.
- `recent` (`string[]`): Recent searches shown on focus.
- `placeholder` (`string`, default `'Search'`): Placeholder.
- `shortcut` (`boolean`, default `true`): Enable the / shortcut.
- `onSearch` (`(q: string) => void`): Called on Enter.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Filtering lists, docs search, settings search.

### When not to use

- Global app-wide actions: use a command palette.

### Accessibility

- A combobox with a listbox of results; arrow keys move the active option.
- Match counts are announced politely.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- /: Focus search
- ↑ / ↓: Move through results
- Enter: Choose
- Esc: Clear, then close