Search Input

The Search Input component allows users to enter text queries to quickly find relevant content within an interface. It typically includes a text field and a search icon, and may offer additional features such as auto-suggestions, clear input functionality, or filters. Designed to be lightweight and accessible, this component helps streamline navigation and improve content discoverability.

Styles

default

Label

warning

Label

destructive

Label

success

Label

Variations

Medium

icon-none

Label

icon-leading

Label

⟳

icon-trailing

Label

icon-both

Label

Large

icon-none

Label

icon-leading

Label

⟳

icon-trailing

Label

icon-both

Label

States

default: default

default: hover

default: focus-empty

default: focus-populated

destructive: loading

default: field

default: disabled

Label

default: field

default: read-only

Label

warning: default

warning: hover

warning: focus-empty

warning: focus-populated

destructive: loading

warning: field

warning: disabled

Label

warning: field

destructive: default

destructive: hover

destructive: focus-empty

destructive: focus-populated

destructive: loading

destructive: field

destructive: disabled

Label

destructive: field

success: default

success: hover

success: focus-empty

success: focus-populated

destructive: loading

success: field

success: disabled

Label

success: field

Assistive Text

Assistive text conveys additional guidance about the input field, such as how it will be used. It should only take up one or two lines, being persistently visible or visible only on focus.

default

Label

Helper message displayed here

warning

Label

Helper message displayed here

destructive

Label

Helper message displayed here

success

Label

Helper message displayed here