# SearchBar

Capsule-shaped search input with leading magnifier, optional clear button, optional trailing slot (e.g. ⌘K hint), and Enter-to-submit. Wrapped in `<form role="search">` so iOS shows the on-screen "Search" key. Inputs are normally rectangular in this design system — search is the one intentional capsule exception, matching Apple's HIG.

[View examples](https://marsam.rahhal.app/components/search-bar) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/search-bar`

**Category:** `forms`

## Sizes

| size | height |
| --- | --- |
| sm | 2.25rem / 36px (compact toolbars) |
| md (default) | 2.75rem / 44px (matches Button default) |
| lg | 3rem / 48px (hero search) |

## Props

| prop | type | purpose |
| --- | --- | --- |
| value / onChange | controlled | standard React input pattern |
| onClear | () => void | renders a trailing × button when value is non-empty |
| onSubmit | (value: string) => void | fires on Enter or form submit |
| trailing | ReactNode | custom trailing content (⌘K hint, voice button, …) |
| size | sm | md | lg | visual size; default md |