SearchInput
Search field with a clear button that appears only when there is something to clear.
Example
<SearchInput id="docs-search" label="Search docs" />Sizes
<SearchInput id="search-sm" label="Small" size="sm" />
<SearchInput id="search-lg" label="Large" size="lg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | Search | Hint text. |
| Label is visually hidden by default; the placeholder carries the visible cue. | |||
Accessibility
- Renders
type="search"(announced as search box). - Clear button has
aria-label="Clear search"and returns focus to the field.