Minimum width

The minimum width for a search field is 3× the height of the field, for both standard and quiet style. This minimum width guarantees that small search fields are readable and easy to target on touch devices.

Text overflow

When the entered text is too long for the available horizontal space in the field, the text truncates.

Help text overflow

When the help text is too long for the available horizontal space, it wraps to form another line.

Keyboard focus

A search field can be navigated using a keyboard. The keyboard focus state takes the field's visual hover state and adds a blue ring to the field in focus.

In-field button

The in-field button offers an option to clear any input search term.

If search results are being shown in a menu or popover, selecting this button will close the menu and clear the field. If a search term has been entered and the results have appeared, selecting this will only clear the field and not affect the list of results.