Chips
Compact elements used to filter content or display user input.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Ensure all chips have an ID, which is used in the
attribute of the label, as selection chips are really checkboxes wrapped in labels. - Always use an
for removable chips, which are really buttons. Use a label such as “clear <label text>” to ensure screen reader users can predict the button’s behavior. - Use a
and to ensure chip groups are within HTML lists so screen readers can indicate how many options are in the group.
Keyboard controls
Chips have the standard behavior for checkboxes (selection chips) or buttons (removable chips).
Navigation
| Key | Behavior |
|---|---|
| Tab | Moves to next chip. |
| Shift + Tab | Moves to previous chip. |
Selection chips
| Key | Behavior |
|---|---|
| Space | Toggles beween on and off state. |