Skip to main content
SearchBar
ImplementedThumb-zone search trigger for mobile layouts (HV2 / R5, ADR-058). A plain button (no state, no navigation) that opens the DS SearchSheet; carries the 56px bar height, the 44px tap-target floor and a semantic focus ring (ADR-071: outset recipe with ring-offset-ep-bg). Pairs with SearchSheet; the consumer owns what 'open' does.
Categorymolecules
Source
components/molecules/SearchBar/SearchBar.tsxProps
Preview
SearchBar
Prop
Type
Required
Default
Description
labelstringRequired
—Visible text and accessible name of the bar.
onOpen() => voidRequired
—Called on click / Enter / Space.
hintstringOptional
—Optional secondary line (e.g. active filter summary).
classNamestringOptional
—Additional CSS classes on the button.
idstringOptional
—Stable id, useful as the sheet's return-focus target.
Quick use:
<SearchBar />Accessibility
ARIA rolebutton