v1.4
Overview
A Search Box provides a mechanism for searching broadly across an application or all the columns of a Data Table. It can be used for both desktop and mobile applications.
Anatomy
Dimensions and States
Behavior
Typeahead
Results Navigation
Overview
Search boxes allow users to filter through large collections/a list of values by typing text into a field. There are two types of search boxes:
Types
Interaction States
***# Digital Accessibility
Keyboard Behavior
Use standard order of operations, Left to Right, Top to Bottom.
| KEY | FUNCTION |
|---|---|
| TAB | Takes user to the next interactive element in the tab order |
| SHITF+TAB | Takes user to the previous interactive element in the tab order |
| ENT/RET or SPC | Submits value Expands/Collapses toggle Clears value (when close icon has focus) |
| Arrow Left/Right | Moves cursor left or right, in-between each character of value string |
| Arrow Up/Down | Up arrow moves cursor to the beginning of the value string Down arrow moves the cursor to the end of the value string |
| DEL | Clears value when text box has focus |