# Chip

A chip is a compact token for a selected value, filter, status, or removable
item. Use it only when the label remains understandable outside a sentence.

## Choose the right pattern

- **Filter chip:** toggles a query constraint and exposes pressed state.
- **Input chip:** represents a value already entered, optionally removable.
- **Choice chip:** selects one value from a small set; use radio controls when
  the decision is consequential or the options need descriptions.
- **Status badge:** read-only. Do not make a badge look interactive.

## Behavior

A chip that performs an action is a button. A removable chip has a separately
named remove button when the whole chip also performs another action. Do not
hide the only removal path behind hover. Preserve focus predictably after
removal: move to the next chip, then the previous chip, then the input.

Selected, disabled, error, focus, hover, and pressed states must be visually
distinct without relying on color alone. Long labels truncate only when the
full value is available through another accessible path.

## Accessibility

- Use native button semantics for interactive chips.
- Express toggle state with `aria-pressed` when a button is a persistent filter.
- Give removal controls names such as “Remove Design systems”.
- Keep the interactive target large enough for the supported pointer contexts.
- Do not nest a button inside another button.
- Preserve reading order when chips wrap.

## Responsive and content rules

Allow wrapping before horizontal scrolling. Keep the entry field visible in a
chip-input, even after many values. Localize labels and test long tokens. Avoid
using icon-only chips for domain concepts whose symbols are not universal.

## Verification

- Keyboard users can reach, toggle, and remove every interactive chip.
- Focus remains on a meaningful element after removal.
- Selected state is announced and visible in forced-colors mode.
- Zoom and long translations do not overlap or clip controls.
- Read-only status chips cannot be mistaken for buttons.