Forms
SearchInput
A rounded search field with icon affordance, optional clear button, and accessible label.
Curated demo
Reference
A rounded search field with icon affordance, optional clear button, and accessible label.
- SearchInput only owns the field UI; consumers own search indexing and result rendering.
- The clear button dispatches snurble-search-clear and restores focus to the input.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id * | string | — | Input id. |
name | string | — | Input name. |
value | string | — | Initial value. |
placeholder | string | 'Search' | Placeholder text. |
label | string | 'Search' | Visible label text. |
clearable | boolean | true | Show a clear button. |
size | 'sm' | 'md' | 'lg' | 'md' | Input size. |
disabled | boolean | false | Disable the input. |
class | string | — | Additional CSS classes. |
Example snippet
<SearchInput id="docs-search" label="Search docs" placeholder="Search components" />