Chips represent a set of interactive keywords that help label, organize, and categorize objects. People can add or remove them.
Figma
The Figma reference for Chip will appear here once the design link is added.
Storybook
Interactive examples for Chip will render here once the Storybook link is wired in.
Best practices
- Present chips close to or within the input control used to add and remove them.
- Keep chip labels short and scannable.
- Make the remove affordance obvious for chips that can be deleted.
Accessibility
- The remove control is a button with a label so assistive technology announces which chip will be removed.
- It’s reachable with Tab and activated with Enter or Space.
- When a chip is removed, move focus to the next logical element so keyboard users aren’t stranded.