The search input is a text input with a provided default search icon. The search input also uses type="search" to improve user experience on specific devices and improve accessibility.
Usage
Use a search input when user is expected to perform a search.
States
Enabled
Use when interactive and ready for input.
Active
Use when selected by a user with an input method, such as mouse or keyboard.
Disabled
Use when not interactive. For example, when a user does not have permissions to edit the input.
Error
Use to communicate a user or system error. This validation can happen when the user moves away from the input or after attempting to submit a form. For example, invalid input or username already taken.
Success
Use to provide real-time feedback immediately after a user’s input. For example, username available.
Layouts
Search inputs are available in vertical, horizontal, and compact layout. Horizontal layouts are preferred when it is often used on its own in a horizontal container such as an application header. See more layout guidelines on the form page.
