Chips

Overview

Chips help people enter information, make selections, filter content, or trigger actions. They are compact, low-emphasis, and meant to be used in groups — unlike buttons, which are high-emphasis triggers for primary or secondary actions. A chip can communicate a persistent state (an active filter); a button performs an immediate action. The two have different semantic roles and are not interchangeable.

There are four types — assist, filter, input, and suggestion — plus a ChipGroup for layout. They share one 32px pill shell, the Morpha state-layer interaction model, the focus ring, and the press feedback.

Assist chip

Assist chips offer a contextual, low-emphasis action based on the current content or task — open a route, start a search, add a suggested tag. Add a leading icon, avatar, or image to clarify the action, and choose the outlined (default) or elevated style. Avoid crowding a view with too many — a long list becomes visual noise.

Filter chip

Filter chips are selectable options that filter content; use them when the user applies quick, visible filters in place. Selecting one swaps in a leading check and the high-emphasis (secondary-container) style. They can carry a leading icon, a trailing chevron that opens a menu, or an onRemove (X). Don't use a filter chip when there's only a single option.

Input chip

Input chips represent values the user entered — tags, email recipients, assigned categories — and can be removed with a trailing X (or, while focused, the Backspace/Delete key). They support a leading icon or a fully-rounded avatar. selected is a controlled visual state you own.

Suggestion chip

Suggestion chips offer something the user can adopt quickly — a suggested search term or a likely action. Keep labels short (aim for ≤ 20 characters). They behave like very-low-emphasis mini-buttons, with an optional selected emphasis and outlined or elevated styles.

Chip group

ChipGroup lays out a set of chips — wrapping by default, or a single horizontally-scrollable row with scroll. It adds toolbar-style arrow-key navigation (← / → between chips, Home / End to the ends). Selection state stays controlled by you on each chip.

Installation

API Reference

AssistChip

FilterChip

InputChip

SuggestionChip

ChipGroup

Accessibility

• Assist and suggestion chips render a native <button type="button"> (an action). Suggestion's selected is a visual emphasis only (exposed via data-state), not a toggle.
• Filter chips are toggles: they render <button aria-pressed> and reflect selection with a leading check, so the state reads beyond color alone.
• Input chips are a non-interactive container with a properly-labelled remove <button> (no nested buttons). Removable filter chips can also be cleared with Backspace/Delete while focused.
• ChipGroup is a role="group" — give it an aria-label — and provides arrow-key navigation across the enabled chips on top of normal Tab order.
• A visible focus ring (3px accent with a 2px offset) is provided via focus-visible, and the press feedback (and check pop-in) respect prefers-reduced-motion.
• The 32px pill keeps a transparent 44×44 hit target for touch, except where a trailing remove control needs the space.