imitation
SearchInput
A pill search field with icon, clear and Cancel. Filters a list or lives in a sheet.
SearchInputonChange filters as you type, onSearch on Enter
1 of 5 discussions
In context
Filtering, no matches, in a sheetThe list narrows as you type; the sheet search is flat
Ask
Topics
No matches
Nothing in your Discussions mentions “purgatory”. Try a shorter word.
Custom glyphs
icon and clearIconSwap the glyphs; height, border, radius, fill, focus and clear-button size are --rebar-search-input-* tokens.
⌕
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | string | undefined | No | — |
defaultValue | string | undefined | No | |
onChange | ((value: string) => void) | undefined | No | — |
onSearch | ((value: string) => void) | undefined | No | — |
onCancel | (() => void) | undefined | No | — |
clearable | boolean | undefined | No | true |
loading | boolean | undefined | No | — |
variant | "pill" | "flat" | undefined | No | pill |
size | "md" | "lg" | undefined | No | md |
aria-label | string | undefined | No | Search |
cancelLabel | string | undefined | No | Cancel |
clearLabel | string | undefined | No | Clear |
icon | ReactNode | No | — |
clearIcon | ReactNode | No | — |
Accessibility
A role="search" landmark around an <input type="search"> named Search (override with aria-label). Enter runs onSearch and the soft keyboard shows a Search key. The clear and Cancel buttons are real buttons (the clear target is padded to 44px); Escape clears the text. The loading spinner is a labelled status.
data-rebar-* attributes
data-rebar-component="search-input", data-rebar-variant="pill" | "flat", data-rebar-size, data-rebar-focused, data-rebar-disabled; parts field, icon, input, spinner, clear, cancel.