Autocomplete

Anatomy

Autocomplete is made up of a form input field, label, and Overlay of menu options. The label is required but may be visually hidden. Optionally, a leading visual and/or clear button may be displayed.

Edit in Figma

By default, the Autocomplete text input uses the TextInput component. It has all the same design functionality and properties as a regular TextInput including size options, width, leading visual, trailing action, and states.

The list in the menu is rendered using the ActionList component, so menu items can be rendered with all of the same options as ActionList.Item.

Sort and filter behavior

Sorting

The order of the items should be ordered in a way that makes it easy for a user to find a specific value. This could mean items may be ranked by how likely a user is to pick that option (for example, ordering labels by the number of times they've been used in that repository), or it could simply be in alphabetical order.

If multiple values can be selected, the default behavior is to move the selected items to the top of the list after the menu is closed. If this sorting logic is not helpful for your use case, you may override this behavior with a more appropriate sorting logic.

Filtering

By default, menu items are filtered based on whether or not they match the value of the text input. The default filter is case-insensitive.

Custom filtering logic can be applied if the default filtering behavior does not make sense for your use case. However, it is strongly discouraged to disable filtering entirely.