Docs draft
SearchInput
Component storyFigma component set ↗React component ↗DSDS entity ↗
States
empty — No value entered yet.
focus empty — Focused with no value entered.
filled — Holds an entered value.
focus filled — Focused while holding a value.
Design specifications
| typography | type.title-1 — the old bar was 34 Bold; searching is a headline act |
| placeholder | color.text.secondary |
| value | color.text.entry |
| underline | rest color.border.strong, focus color.accent.text |
| clear | Icon / Close at 24 in text.secondary, appears with a query |
Accessibility
Enter — Submits the query (owner's form handles it).
Tab — Field, then Clear when present (aria-label Clear search).
type=search input; the native cancel button is suppressed in favor of the system clear affordance.