InputTags

What component has

Keyboard support
Key	Function
`Tab`,	On a tag, or in the empty text/combobox input: moves focus to the next (previous) focusable element. In the filled text input: adds a new tag.
`Enter`	On an editable tag: starts editing the tag. On a tag's Remove button: removes the tag. In the filled text input: adds a new tag. In the combobox input: opens the list of items, or applies the selected item.
`Space`	On an editable tag: starts editing the tag. On a tag's Remove button: removes the tag. In the filled text input: first `Space` adds a space, second `Space` adds a new tag.

Find detailed information about the keyboard support for input fields in the Keyboard control guide.

The following table describes roles and attributes the component already has.

Roles and attributes
Element	Attribute	Usage
`InputTags` > `ul`	`aria-label`	Defines an accessible name for the list of tags. Automatically populated from the accessible name of `InputTags.Value`.
`InputTags.Tag.Text`	`aria-describedby="IDREF"`	Only for `editable` tags. Provides a "Press Enter to edit" description.

Label InputTags.Value using either <label>, aria-labelledby or aria-label. Remember that, when using <label>, only one label can be associated with each form element. Refer to our examples.
Indicate optional fields clearly by adding the word "optional" beside the input label.
Inputs in invalid state should be associated with their error message using aria-describedby.

Read more about the accessibility of the components used in InputTags:

For more accessibility recommendations, refer to the common Accessibility guide.

Last updated: