What is a chip in UX design?
A chip is a compact, interactive element typically rendered as a small rounded rectangle or pill containing a short label and optionally an icon, avatar, or remove button. Chips represent discrete pieces of information or choices in a compact format. The term is associated with Google's Material Design system, which defines several chip variants: input chips represent user-added values in a field, filter chips toggle filter states in a filter bar, choice chips represent single-selection choices within a group, and action chips trigger related actions. Despite these formal distinctions, "chip" and tag are often used interchangeably in practice.
When are chips more appropriate than buttons or tags?
Chips work well in filter bars where multiple filters can be toggled on and off and the active filters should be visible simultaneously. They work well in tag input fields where each added value should be distinctly labeled and individually removable. They work well as suggestion bubbles that offer quick responses or actions in conversational interfaces. Chips are more appropriate than buttons when the element represents a data value or a filter state rather than a primary action, and more appropriate than plain tags when the element needs to be interactive, such as toggleable or removable.
What are the accessibility requirements for chips?
Chips that are interactive must be focusable and operable by keyboard. Toggle filter chips must communicate their selected or unselected state programmatically through aria-pressed or aria-selected. Input chips with remove buttons must have accessible labels for the remove action, such as "Remove Python tag," that include the chip's value so screen reader users know what will be removed. Groups of chips that function as a single-selection set should be grouped with appropriate ARIA roles to communicate the grouping and selection behavior. All chip states including selected, unselected, disabled, and hover must meet color contrast requirements.