Build Assets
UI Component
Search Input
Specialized text input for querying content with clear, loading, and results feedback.
Platform: bothTags: search, input, filter, query, find
Purpose
Enables users to find content by entering a query. Recognition over recall: search makes the full content set accessible without requiring users to remember exact paths.
Anatomy
- Magnifier icon: 16px, left inside input, tertiary color
- Input field: 14–16px, comfortable padding (10px 12px 10px 36px)
- Clear button: × appears when input has value, right inside field
- Loading indicator: spinner replaces magnifier when async query running
- Results count: "24 results" below or inside field after query
- Optional: keyboard shortcut hint (⌘K) right-aligned inside empty field
States
- Empty: magnifier icon, placeholder text, optional shortcut hint
- Focused: border accent, placeholder dimmed
- Has value: text + clear × button visible
- Loading: spinner replaces magnifier
- Results: count shown, results list below
- No results: empty state with suggestion
Tokens
spacing
paddingLeft: 36pxpaddingRight: 32pxpaddingY: 10px
sizing
iconSize: 16pxheight: 40pxclearButtonSize: 16px
Do
- Clear button should appear immediately when the field has any value
- Debounce async search: 300ms after last keystroke
- Show result count so users know the scope of the results
- Support Escape to clear and blur the search field
Don't
- Require pressing Enter to trigger search — live search is expected
- Show no feedback during slow queries — spinner is critical
- Clear the field when the user navigates away and returns
- Use a search input for filtering a local list of fewer than 20 items — use a text filter instead
Accessibility
- role="search" on the wrapping <form> or <div>
- aria-label="Search" or aria-labelledby on the input
- Clear button: aria-label="Clear search"
- Results: aria-live="polite" on the results region for count announcements