Component · Inputs · 09
Search
Search = an input with a leading icon and a clearable value; the results are a separate surface.
glassmorphism
GlassmorphismStyle
Glass buttonsComponent
Glassmorphic loginTheme
What is a Search?
Search is an input with a promise of results. Name the icon slot, the clear affordance, and what the shortcut does.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The state shown when there is no data — give it a message and a next action.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- The keyboard-focused state — a visible ring or border change. Never remove it.
Anatomy
These are the parts to name in your prompt.
- 01 Field
- 02 Leading icon
- 03 Clear button
- 04 Suggestion list
When to use
- Filtering a table that is already on screen
- Global search in a top bar with a keyboard shortcut
- Command-style search that jumps to actions
Avoid when
- Fewer than ten items — plain visibility beats search
- The results need filters and facets — use a search page
- There is nothing to search yet
Put the shortcut hint inside the field — a bare magnifier tells the user nothing about where search lives.
See also
Create a search component.
STYLE
- 36px field, 10px radius, #F5F5F7 surface, no border
- 16px leading magnifier in #6E6E73, 8px gap to the text
- a clear button appears only when the field has a value
- focus widens the field to 280px with a 220ms ease
STATES
- empty, typing, with results, no results, focus with a 2px ring
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui