Tag picker

A Tag picker combines a text input and a dropdown giving people a way to select an option from a list or enter their own choice. These selections are represented as tags.

Behavior

When a user clicks into a tag picker, they invoke a dropdown that shows a list of items the user can choose. These are provided by the system and can represent files, people, and meetings. Clicking on one of the list items will close the dropdown and insert a tag showing the selection into the input.

Type to filter and select

Users can type when focused on an input to filter the list to match exactly what they’re looking for. Active descendant will always land on the first item, and will be the closest match to what the user has typed. Hitting enter will select the first item unless the user traverses the list with up and down arrow keys.

Secondary action

A tag picker provides a secondary action slot for extra functionality if needed. An example would be the option to “Clear all” tags within the input.

Layout

Wrapping tags

By default, tags that get inserted to the input wrap and will make the height grow to fit the content. Text within tags themselves can truncate, although it’s not provided out of the box as it is heavily opinionated by the product.

Truncating text in tags

If truncating is needed to fit in more content, a max width can be assigned so that if text in a tag exceeds it, it will truncate.

Accessibility

Provide a clear name for the input

Use aria-label on TagPickerInput to provide an accessible name for the input. This attribute helps screen readers understand the purpose of the input.

Deletion interaction

When TagPickerInput is focused, pressing Backspace will remove the last tag. This behavior should be communicated to the user to avoid confusion.