Search Field

Specialized search input with a leading search icon, trailing clear action, enter submit behavior, disabled state, and quiet variant.

Stable

Open Search Field Playground

Open in Figma

Options

PropertyValuesDefault
placeholdertextSearch
valuetext—
quiettrue / falsefalse
disabledtrue / falsefalse
statedefault / hover / active / focus / disabled / readonlydefault

States

Default
Hover
Focus
Readonly
Disabled

Behaviors

Clear action

The trailing control clears the query and keeps focus in the input.

Submit on Enter

Inside forms, pressing Enter submits the form using native browser behavior.

Quiet variant

Quiet mode reduces visual emphasis while preserving interaction and accessibility.

Accessibility

  • Provide a visible label or an accessible name via aria-label / aria-labelledby.
  • Use the native disabled attribute for unavailable fields.
  • Do not rely on placeholder text as the only field label.