# Search field

Filters a visible list, or finds records, as the person types.

* Kind: component
* Name: SearchField
* Page: https://design.werklist.com/components/search-field
* Version: 2.1.2

## When to use it

* Above a list it filters, with the list named in the placeholder
* Inside the command palette

## When not to use it

* Choosing a value in a form: use a combobox
* A search that does not name what it searches

## Rules

* Search from 2 characters, 120 ms after the last key
* An answer that arrives after a newer one is dropped
* The earlier results stay on screen, dimmed, while the next ones load
* The query is kept in the address of the page

## Anatomy

* Control: a text field of type search, with the fill and the focus of the text field. The browser's own clear button is hidden (--input-border)
* Height: 44 px, or 36 px in a toolbar with a mouse, and 44 px on a touch screen
* Search icon: 16 px, 12 px from the start (--text-muted)
* Text inset: 36 px at the start, and 44 px at the end while the clear button shows
* Clear button: an icon button of 32 px with a cross, named Clear search, 6 px from the end, shown only when the field holds text
* Corner radius: 8 px (--radius-lg)

## Sizes

* md: height 44 px, type 14 px on 20 px
* compact: height 36 px with a mouse and 44 px on a touch screen, type 14 px on 20 px

## States

* Empty: The placeholder in the muted ink, and no clear button (--text-muted)
* Filled: The clear button shows (--text)
* Loading: The earlier results dim to 60 percent. A loading indicator appears only after 150 ms
* Focus, disabled: As the text field, with no hover state (--brand-blue, --text, --text-muted)
* Search on a phone: The field spans the header, the other controls hide and a Cancel button shows

## Keyboard

* /: Moves focus to the search field when focus is not in a field
* Escape: Clears the text. With the field empty, leaves the field or the search on a phone
* Enter: Keeps the query in the browser history, so Back returns to it
* Down arrow: Moves into the suggestions when the field has them. The field is then a combobox with aria-activedescendant

## Accessibility

* The field sits in a search landmark
* Its accessible name repeats the placeholder when there is no visible label
* aria-keyshortcuts="/" on the field that takes the slash
* The number of results sits in a role="status" region under the field and is read when the results settle

## Content

* The placeholder names what is searched: Search candidates, Search this board
* The clear button is named Clear search
* On a phone the Enter key reads Search. The field offers no autofill and no spelling correction

## Tokens

* --glass-fill-input
* --input-border
* --brand-blue
* --text-muted
* --radius-lg