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: default
default: hover
default: focus-empty
default: focus-populated
default: field
default: disabled
default: read-only
warning: default
warning: hover
warning: focus-empty
warning: focus-populated
warning: filled
warning: disabled
destructive: default
destructive: hover
destructive: focus-empty
destructive: focus-populated
destructive: filled
destructive: disabled
success: default
success: hover
success: focus-empty
success: focus-populated
success: filled
success: disabled

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

Inline message

default

Inline message

default

Inline message

default

Inline message