v3.0.0

ChipsChoice

A selectable pill — several on at once like checkboxes, or one in its group like radio buttons.

3.0 3.0 -- 3.0.5

Overview

ChipsChoice is a pill that shows whether it is chosen, and a tap changes the choice. Multi Choice works like a checkbox — several chips on at once; Single Choice works like a radio button — one chip on in its group. It comes in two sizes, M and S.

1
M · Multi Choice
2
M · Single Choice
3
S · Multi Choice
4
S · Single Choice

States

Three states — Standard, Active and Skeleton — and Disabled, its own property, on a Standard or an Active chip; then the interaction on an enabled chip: hover and press, and the focus on the web. Figma calls the first state "Default"; the DS name is Standard. Every colour below is a default — an instance may set any DS colour.

Standard

1
Fill --background-primary — the fill.--chips-choice-fill — the property that carries it.
2
Start Slot --text-and-icon-primary — the icon, by the root colour.
3
Title --text-and-icon-primary — the root colour.
4
Subtitle --text-and-icon-primary — the root colour.
5
Control --text-and-icon-secondary — the empty glyph: a rounded square for Multi Choice, a circle for Single Choice.
6
Border --border-default — the colour.--chips-choice-border — the property that carries it.var(--sp-s2) — the width, drawn inside the box.

Active

1
Fill --surface-on-white — the Active fill.--chips-choice-fill-active — the property that carries it.Close to the Standard fill (≈ 1.1:1) — the border and the glyph tell a chosen chip apart.
2
Control --text-and-icon-primary — the check for Multi Choice, the dot for Single Choice.
3
Border --border-active — the colour.--chips-choice-border-active — the property that carries it.

Hover / Pressed

1
Overlay --shadow-pressed — over the fill, under the border.The same on a Standard and an Active chip; hover with a pointer and press look the same, and press also scales the content — see Animation.

Disabled

1
Fill --background-primary — unchanged.
2
Content --text-and-icon-disabled — the icon, the Title, the Subtitle and the glyph.No hover, no press, no change of choice.
3
Border --border-default — unchanged.

Disabled + Active

1
Fill --background-primary — the Standard fill, not the Active one.
2
Control --text-and-icon-disabled — the check or the dot stays: the choice is still shown.
3
Border --border-default — the Standard border, not the Active one.

Skeleton

1
Fill --skeleton-on-white — an empty pill: no content, no border.
2
Sweep --pattern-shimmer — the DS sweep; it runs in reverse in RTL.

Focused (web)

1
Border --border-inform — the ring on :focus-visible, over the Standard or the Active border.var(--sp-s2) — its width, unchanged.A re-pointed border still shows the focus; no outline ring — except in forced colours, where an outline in system colours stands in.

Anatomy

A pill with one row inside: the start slot, the Text Container, the control. The chip is the checkbox or the radio — the control's glyph only pictures its state. The Figma start slot also takes an Avatar — it has no web build yet.

Parts

1
Start Slot var(--sp-s24) — the slot; an icon or a Number Indicator, centred.Figma 🔴Slot#1, the set ChipsAction shares. Off by default. Optional.
2
Text Container var(--sp-s4) — left and right padding: the gap to the slot, the control or the edge.One container (Figma TextContainer) holding the Title and the Subtitle — see Text Container below. Required.
3
Control var(--sp-s24) — the glyph: a checkbox or a radio, empty or chosen — see Control Glyphs below.Figma 🔵Slot#2 with the private .↳🔵Controls set. On by default; off, it is the platforms' Filter preset. Optional.
4
Container --background-primary — the fill.--surface-on-white — the fill when Active — see States.var(--sp-s2) — the border, drawn inside the box.The whole pill is the one tap target; its row scales on press — see Animation. Required.

Text Container

1
Text Container var(--sp-s4) — left and right padding.var(--sp-s0) — top and bottom padding.One container — Figma TextContainer — holding the Title and the Subtitle as a centred column. Its side padding is the gap to the slot, the control or the chip's edge.
2
Title Body/Main Body — the text style.--text-and-icon-primary — the root colour.One line; the chip hugs it. Required.
3
Subtitle var(--sp-s0) — under the Title, no gap.Caption/Caption — the text style.--text-and-icon-primary — the root colour.One line. Off by default. Optional.

Control Glyphs

1
Multi Choice, Standard --text-and-icon-secondary — checkbox-unselected, a rounded square.
2
Multi Choice, Active --text-and-icon-primary — checkbox-selected, a check with no box.The icon Figma's .↳🔵Controls uses lives in icons/outlined/deprecated/ — flagged.
3
Single Choice, Standard --text-and-icon-secondary — radio-unselected, a circle.
4
Single Choice, Active --text-and-icon-primary — radio-selected, a circle with a dot.var(--sp-s24) — every glyph's size; each is aria-hidden: the chip's role carries the state.

Layout

An M chip with every part on — the container is ChipsAction's. The chip hugs its content; S changes only the minimum height.

General

Container var(--sp-s12) — start and end padding.var(--sp-s0) — top and bottom: the row centres on the minimum height.var(--sp-s96) — the radius: a full pill at every size.var(--sp-s2) — the inside border, outside the layout: it adds nothing to the size.Hugs its content: a "Title" chip with its control is 12 + 4 + 32 + 4 + 24 + 12 = 88, as in Figma.
Text Container var(--sp-s4) — left and right padding: the gap to the slot, the control or the edge.var(--sp-s0) — top and bottom padding, and the Title ↔ Subtitle gap.
Start Slot And Control var(--sp-s24) — each; the start slot hugs a wider Number Indicator.var(--sp-s0) — the row gap: the Text Container's padding spaces them.

Sizes

M var(--sp-s48) — the minimum height.
S var(--sp-s40) — the minimum height.Everything else is the same as M.
Minimum Width var(--sp-s64) — at either size.With the control on a chip is always wider; the minimum binds on a short title with the control off — "All", the platforms' Filter preset.

Skeleton

Width var(--sp-s124) — fixed: there is no title to hug.
Height var(--sp-s48) — M.var(--sp-s40) — S.No border.

RTL

1
Start Slot At the right edge.
2
Control At the left edge. The glyph keeps its orientation — the Figma RTL variants use the same glyph, so the check is not mirrored.
Direction dir="rtl" on the chip or an ancestor mirrors the row; the paddings are symmetric. In a Single Choice group the arrow keys follow the visual direction.

Animation

Motion follows the motion system: the press is pushButton, as on ChipsAction; the choice moves the fill on Transforming/State/Default, as on the Checkbox. Three motions: the press, the choice, and the skeleton's shimmer.

Press

Pressed — 95%, frozen

Released — back to rest

Live — hover, press, Space to toggle

pushButton The content row scales and the overlay comes in, together; the pill keeps its size.The same on a Standard and an Active chip.
1
Press var(--component-push-button-press) — 200 ms.var(--curve-standard-ease-in-out) — the curve.transform of the content 100% → 95%, and var(--shadow-pressed) over the fill.
2
Release var(--component-push-button-release) — the same 200 ms back.95% → 100%, the overlay out.
Hover var(--component-push-button-release) — the overlay alone, no scale.Pointer devices only (@media (hover: hover)). A disabled chip and a Skeleton do not react.

Choice

Standard

Active

Live Multi Choice — each chip on its own

Pickup time

Live Single Choice — one on in the group; the arrow keys move it

1
Fill var(--transforming-state-default) — the fill eases from one to the other.--background-primary — Standard.--surface-on-white — Active.The Checkbox precedent: a state change, not a press.
2
Border var(--component-push-button-release) — the ring is one box-shadow with the overlay, so it eases with it.
3
Glyph The empty glyph and the check or the dot swap in the same frame — two icons, not a morph.
Single Choice The chip that was on turns off in the same handler, with the same motion in reverse; nothing else moves.
Reduced Motion --component-* — zeroed in motion.css under prefers-reduced-motion: reduce.--transforming-* — the same.So the overlay, the 95% scale and the choice apply at once; no override of its own.

Skeleton

LTR

RTL — the sweep runs the other way

Shimmer var(--pattern-shimmer) — the DS sweep across the pill.It runs in reverse in RTL.
Skeleton → Content The host swaps the skeleton for the chip; the chip declares no transition of its own.
Reduced Motion var(--pattern-shimmer) — zeroed at the token, so the skeleton holds still.

Usage

ChipsChoice sits where a person picks from a few short options shown in full — several at once, or one in a group — and sees the choice in place.

1
Options To Add Multi Choice: each chip is its own checkbox, on or off; any number can be on.The card's heading names the row — role="group" with aria-labelledby on the web.
2
One Value — And An Action Next To It Single Choice: the options form a radio group named by the heading; one is on."Schedule delivery" opens a sheet, so it is a ChipsAction, not an option: it sits after the group, outside it, as its own Tab stop — the Figma row.
3
✕ A Long List Past a handful of options, or with long labels, a wrapping wall of chips is hard to scan. Use a list of Cells with a Checkbox or a RadioButton.
4
✕ An Action As A Choice A chip that does something on tap — "Call the driver" — would announce "Not checked" and show an empty box. It is a ChipsAction; a choice chip only changes its choice.

Options

Add to your order

✓ Multi Choice — services added to the order

Pickup time

When should the courier come?

✓ Single Choice — one value; the ChipsAction after the group opens a sheet

Cities

✕ A long list of options — a list of Cells with a Checkbox

Your driver is on the way

✕ An action as a choice chip — a ChipsAction

Accessibility

The chip is the checkbox or the radio button — one target, one focus stop, and its checked state is the control's own value. The glyph only pictures that state. The screen supplies the group's name and a word for a Number Indicator in the start slot.

Multi Choice — each chip a checkbox

Single Choice — a radio group, one Tab stop

Disabled

Disabled + Active

Skeleton

Focused (web), frozen

1
Multi Choice TalkBack: toggleable(role = Role.Checkbox) — "Two Movers, Checked, Checkbox, Double-tap to toggle."VoiceOver: a button with the selected trait — "Two Movers, Selected, Button. Double tap to toggle setting."Web: <button type="button" role="checkbox" aria-checked> — the role and the state are required, and type="button" keeps a form from submitting. The name is the text — the Title, then the Subtitle after a .visually-hidden ", ".
2
Glyph A picture of the state, never announced — not a node on TalkBack, accessibilityHidden(true) on VoiceOver, aria-hidden on the web.Web: aria-checked shows the glyph and the colours through CSS, so one handler flips aria-checked and data-ds-state and nothing else — the value, the picture and the analytics never drift apart.
3
Single Choice TalkBack: selectable(role = Role.RadioButton) in a selectableGroup() — "10–20 min, Checked, 1 of 2, Radio button"; "Double-tap to select" on the options that are off.VoiceOver: a button with the selected trait; "Double tap to select." on the options that are off; the group is a container named by the screen.Web: role="radio" options in a role="radiogroup" with aria-labelledby. One Tab stop — roving tabindex, 0 on the checked option; the arrow keys move the focus and the choice together, wrap at the ends and skip disabled options.
4
Disabled TalkBack: enabled = false — the value, then "Disabled", no hint.VoiceOver: .notEnabled — "Dimmed"; the hint is cleared.Both keep it reachable; a double-tap does nothing.Web: the native disabled — out of the Tab order, skipped by the arrows, readable in browse mode.
5
Disabled + Active The choice is still read — TalkBack "Two Movers, Checked, Checkbox, Disabled."; VoiceOver "Selected", then "Dimmed".--text-and-icon-disabled — the check, still on the screen.
6
Skeleton Not announced, not focusable — TalkBack clearAndSetSemantics {}, VoiceOver accessibilityHidden(true) (.isLoading(true) alone does not hide it), web aria-hidden + inert. The loading container announces once, politely.
7
Focus (Web) --border-inform — :focus-visible turns the ring; ≈ 4.8:1 against the Standard fill, ≈ 4.2:1 against the Active one in Day (≈ 4.7:1 / ≈ 3.65:1 Night).Forced colours drop box-shadow: an outline in ButtonBorder stands in — thicker when checked — Highlight on focus, GrayText when disabled.
Keyboard Multi Choice: Tab reaches each chip; Space toggles; Enter does nothing — the Checkbox precedent.Single Choice: one Tab stop, on the checked option when it is enabled, else on the first enabled one — re-synced on every change; Space checks; Enter does nothing; arrows with Alt, Ctrl, Meta or Shift are left to the browser.The trap: a <button> synthesizes a click on Enter, so the handler swallows a click that came from Enter.
Not Colour Alone --border-active — the border that, with the changed glyph, tells a chosen chip apart; the two fills are ≈ 1.1:1 (WCAG 1.4.1).On focus the border turns --border-inform, so the glyph is the cue that survives. With the control off (the Filter preset) a focused Active chip differs by the fill alone, and a disabled one not at all — it takes the Standard fill; the state is still announced. Accepted (owner, 2026-11-12).
Figma's Preview Differs The 3.0 Chips Specification frame voices a choice chip on TalkBack as "Not selected, Title, Subtitle, Button, Double-tap to select" and gives it the Toggle trait on VoiceOver. The DS follows its Checkbox and RadioButton contracts instead — and Android's DsChip.Choice already sets the role from its type. The VoiceOver hints keep the Checkbox / RadioButton wording for parity. The DS semantics stand (owner, 2026-11-12); the Figma preview is to be updated.
Long Text And RTL The chip is capped at its container's width; an over-long Title or Subtitle ends in an ellipsis on the screen and the spoken name stays whole. In RTL the row mirrors and the name keeps the language's reading order.
Text Scaling And Targets Body/Main Body — the Title, scales to 150 %, the DS maximum.Caption/Caption — the Subtitle, the same; Caption inside a control — accepted: the typography rules allow it for a control's secondary line (owner, 2026-11-12).var(--sp-s44) — the minimum target in the typography rules.var(--sp-s48) — the M height, above it.var(--sp-s40) — S, below that floor and above WCAG 2.5.8's 24 × 24, as Button S and ChipsAction S — an accepted exception (owner, 2026-11-12).
Reduced Motion The overlay, the 95% scale and the choice apply at once, with no transition, and the shimmer holds still — all zeroed at the token.
Contrast --text-and-icon-primary — the Title, ≈ 17.8:1 on the Standard fill, ≈ 15.7:1 on the Active one (Day).--text-and-icon-secondary — the empty glyph, ≈ 5.25:1 / ≈ 7.92:1, above the 3:1 non-text floor.--text-and-icon-disabled — below the floor on purpose: a disabled control is exempt, and its state is announced.A re-pointed fill keeps the Title and the Subtitle at 4.5:1 or more, the glyph and the border at 3:1.