v3.0.0

ChipsArea

A row of chips that belong together — filters, options or suggestions — in one line that scrolls, or in lines that wrap.

3.0 3.0 -- 3.0.1

Overview

ChipsArea holds a group of chips that belong together and lays them out — in one line that scrolls sideways, or in lines that wrap. Its preset decides what the chips are: filters, options to add, one value to pick, or suggestions to insert.

1
Filter
2
Multi Choice
3
Single Choice
4
Suggest

States

Three states, the same for every preset — Standard, Disabled and Skeleton. The area has no colour of its own: in Standard each chip shows its own state.

Standard

1
Background None — the screen shows through between the chips and under the padding.
2
Chips Each chip in its own state — Standard or Active for a ChipsChoice, Standard for a ChipsAction.One chip may be disabled on its own.

Disabled

1
Content --text-and-icon-disabled — every chip’s title and glyph.No press, no change of choice; the row keeps its layout and still scrolls.
2
Choice --text-and-icon-disabled — a chosen chip keeps its check or dot: the choice is still shown.A Filter chip has no glyph and takes the Standard fill when disabled, so a disabled Filter area shows no choice — only the announcement keeps it. Accepted (owner, 2026-11-12).
3
Fill And Border --background-primary — every chip’s fill, the chosen one too.--border-default — every chip’s border.

Skeleton

1
Placeholders var(--sp-s64) — the width of each of the five: the chips’ minimum.var(--sp-s48) — their height in M.var(--sp-s40) — their height in S.
2
Fill --skeleton-on-white — empty pills: no text, no glyph, no border.
3
Sweep --pattern-shimmer — the DS sweep over each placeholder; it runs in reverse in RTL.
4
Flow var(--sp-s4) — between the lines: the placeholders wrap as the chips would, four and one on a 360 screen.Scroll keeps them on one line.

Anatomy

A container with one row of chips inside. The area draws nothing of its own — its parts lay the chips out; the chips are full ChipsChoice or ChipsAction instances.

Parts

1
Container var(--sp-s16) — left and right padding.var(--sp-s8) — top and bottom padding.Figma [ChipsArea] 3.0: fills its parent's width, hugs its height, no fill; it clips at its edges. Required.
2
Layout var(--sp-s4) — between the chips.Figma's Layout swap — one of the eight sets: one line in Scroll, wrapping lines in Flow — see Layout. In Scroll it runs past the container's edge. Required.
3
Chips The preset's chips, each in its own state and at the area's size — see Chips by Preset below. No fixed count. Required.

Chips by Preset

1
Filter A ChipsChoice with the control off — role="checkbox"; the fill and the border show the choice.The root is a group.
2
Multi Choice A ChipsChoice Multi Choice — the checkbox glyph; any number on.The root is a group.
3
Single Choice A ChipsChoice Single Choice — the radio glyph; one on.The root is the radiogroup — one Tab stop on the web.
4
Suggest A ChipsAction, Title only — a button that puts its value into the field.The root is a group. On the web an area holds one preset.

Layout

The container pads a layout of chips. Figma binds the paddings and the gaps to the SP scale, and the Specification frame notes they "could be changed depending on design needs" — the values below are the defaults.

General

Container var(--sp-s16) — left and right padding (the frame's "vertical padding").var(--sp-s8) — top and bottom padding (its "horizontal padding").Fills its parent's width and hugs its height: two lines of M chips are 8 + 48 + 4 + 48 + 8 = 116.
Gaps var(--sp-s4) — between the chips, and between the lines in Flow.
Chips var(--sp-s64) — the chips' minimum width; each chip hugs its title — see ChipsChoice.

Scroll

One Line The layout is as wide as its chips; the container scrolls it sideways. No scrollbar — the chip cut by the edge shows the row goes on. Figma "Horizontal".
Ends var(--sp-s16) — the first chip from the start edge at rest (top), the last chip from the end edge scrolled to the end (bottom).In between, the chips run under the padding to the container's edge.
Width Fills its parent — the screen's width; one line of M chips is 64 high.

Alignment

1
Start The default — each line starts at the start edge: the left in LTR, the right in RTL.
2
Center For Flow when the group of chips is the screen's focus — the Specification frame recommends it there.
3
End For specific screens only.
Flow Only A Scroll row always starts at the start edge.Figma has no property — it is the Layout instance's auto-layout alignment; iOS ships DsChipsAreaAlignment.

Sizes

M var(--sp-s48) — the chips' height.One line: 8 + 48 + 8 = 64.
S var(--sp-s40) — the chips' height.One line: 8 + 40 + 8 = 56.
One Size Per Area Every chip takes the area's size — iOS forces it onto each chip; the area itself has no size class. The paddings and the gaps stay the same.

RTL

1
First Chip At the right edge; the Scroll row runs to the left and scrolls that way.
2
Flow Lines Each line starts at the right edge — Alignment is logical, so start is the right.
Direction dir="rtl" on the area or an ancestor mirrors it; each chip mirrors as its own spec says. The paddings are symmetric.

Animation

The area has no motion of its own. Its chips move as their specs say, by the motion system; the area adds one behaviour — in Scroll the row follows a choice to the near edge — and the placeholders' shimmer.

Scroll After A Choice

After a tap on “Freight”, the second-to-last — scrolled to the end

After a tap on “Courier”, the second — back at the start

Live — tap the chips at either end

1
Last Two Chips var(--sp-s16) — where the last chip comes to rest from the end edge.A tap on the last or the second-to-last chip scrolls the row to its end (the Specification frame's behavior block).
2
First Two Chips A tap on the first or the second chip scrolls the row back to its start.
Any Other Chip Scrolled fully into view, clear of the edge — iOS scrolls the tapped chip into view.
Timing The platform's own scroll — no DS motion token; the focus stays on the chip.At once under prefers-reduced-motion: reduce.
Keyboard A Single Choice option picked with the arrow keys scrolls the same way; Tab brings any chip into view, clear of the edge.

Chips

Live Multi Choice — each chip on its own

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

Press var(--component-push-button-press) — pushButton: the chip's content to 95% and the pressed overlay, together.The chips' own — see ChipsChoice and ChipsAction.
Choice var(--transforming-state-default) — a chosen chip's fill eases in.In Single Choice the option that was on turns off in the same handler, with the same motion in reverse.
Nothing Of Its Own The area declares no transition and no motion token; the chips around a pressed one never move.

Skeleton

LTR

RTL — the sweep runs the other way

Shimmer var(--pattern-shimmer) — each placeholder's own sweep, the chips' Skeleton.It runs in reverse in RTL.
Skeleton → Content The host swaps the five placeholders for the chips; no transition of its own.
Reduced Motion var(--pattern-shimmer) — zeroed at the token, so the placeholders hold still.

Usage

ChipsArea sits where a few chips belong together on a screen — filters over the content, options for an order, one value from a short set, ready-made replies. The screen names the group with its own label; the area lays the chips out and makes them one group.

1
Filters Over The Content Filter, Scroll: each chip turns on and off on its own and narrows the list or the map under the row.One line keeps the screen's height; a chip cut by the edge shows the row goes on.
2
Options To Add Multi Choice, Flow: several options on at once — services added to the order.The screen's heading names the group — aria-labelledby on the area.
3
One Value — And An Action After It Single Choice: the area is the radio group; one option is on."Schedule delivery" opens a sheet, so it is a ChipsAction: it stands after the area, outside the group — the contract on every platform (owner, 2026-11-12): it may continue the row visually but never joins the choice group.
4
Quick Replies Suggest, Scroll: ChipsAction chips — a tap puts the reply into the message, or a ready-made value into a text field. The chips have no choice of their own.
5
✕ Flow For Many Chips Flow wraps every chip onto the screen and grows tall. Many chips go in Scroll.
6
✕ Options That Need Words Long labels wrap a chip to a line — a list in disguise. Options that need a description go in a list of Cells with a Checkbox or a RadioButton.

Activity

Your orders, newest first

✓ Filter, Scroll — narrows the list under it

Options

Add to your order

✓ Multi Choice, Flow — services added to the order

Pickup time

When should the courier come?

✓ Single Choice — and a ChipsAction after the area

Message the driver

Ready-made replies

✓ Suggest, Scroll — a tap fills the message

Cities

✕ Flow for many chips — it grows tall; use Scroll

Extras

✕ Options that need words — a list of Cells

Accessibility

The area is the group; the chips are the controls. Each chip keeps its own contract — a ChipsChoice is a checkbox or a radio, a ChipsAction is a button — and the area adds three things: the group's name, the selection model and the reach in Scroll. Labels and voiced strings per platform: chips-area-a11y.md.

Multi Choice, Scroll — a group named by the screen's heading

Single Choice — a radio group, one Tab stop

Disabled — every chip disabled

Skeleton — hidden from assistive tech

1
Group And Name The name is the screen's label next to the area, read when the focus enters the group; the area has no visible text of its own.TalkBack: a container, the label a heading or paneTitle next to it — "Options." then "Kaspi, Not checked, Checkbox, Double-tap to toggle."VoiceOver: accessibilityElement(children: .contain) with the label.Web: role="group" with aria-labelledby pointing at the label. Without the group a screen reader hears loose checkboxes and has no set to announce.
2
Each Chip Its Own Each chip keeps its own role, name and state — the area adds none.Web: Filter and Multi Choice role="checkbox", Single Choice role="radio", Suggest a <button>; all type="button". Every chip in the area takes the area's size.VoiceOver: a button with the selected trait when chosen — "Two Movers, Selected, Button. Double tap to toggle setting."
3
Single Choice TalkBack: selectableGroup() on the area, the chips' selectable(role = RadioButton) — "10–20 min, Checked, 1 of 2, Radio button."VoiceOver: a container of buttons — "Up to 1 hour, Button. Double tap to select." No position in the set; the "1 of 2" is TalkBack's and the web's.Web: role="radiogroup" — one Tab stop; the arrow keys move the focus and the choice together (see Keyboard).
4
Scroll var(--sp-s16) — the focused chip's clearance from the edge on the web (scroll-padding-inline).A chip out of view is still in the order: moving the focus onto it scrolls it into view.TalkBack: swipe navigation walks the chips in order; a two-finger swipe scrolls the row. The row is not a node of its own.VoiceOver: moving the cursor onto a chip scrolls the row to it; a three-finger swipe scrolls it by a page.Web: the root is the scroll container but not a Tab stop — it holds focusable chips. No scrollbar: a trackpad, Shift + wheel or a drag on touch; Tab reaches every chip — the arrow keys inside a Single Choice group.
5
Disabled Area TalkBack: every chip reads its value and "Disabled", without a hint; the chips stay in swipe navigation.VoiceOver: every chip reads "Dimmed"; the hints are cleared.Web: aria-disabled="true" on every chip — focusable and readable, its aria-checked still announced, the activation refused; data-ds-state="disabled" on the root.So a disabled Scroll row keeps its clipped chips in the keyboard's reach in every browser — focus scrolls each into view — as mobile keeps them in swipe navigation (owner, 2026-11-12).
6
Skeleton Not announced, not focusable — TalkBack clearAndSetSemantics {} on the placeholders, VoiceOver accessibilityHidden(true) (isLoading alone does not hide them), web aria-hidden="true" and inert on the root — a scroller with nothing focusable inside is a Tab stop of its own in Chrome and Firefox — and inert placeholders with no content and no role. The loading region around the area announces once.
Keyboard Filter, Multi Choice, Suggest: Tab reaches each chip in order; Space toggles a checkbox chip; Enter activates a Suggest chip.Single Choice: one Tab stop — roving tabindex, 0 on the checked option when it is enabled, else on the first enabled one; the arrow keys move the focus and the choice together, wrap, skip disabled options and follow the visual direction in RTL.The trap: a <button> synthesizes a click on Enter, so the handler swallows it — Enter does nothing on a checkbox chip.
After A Choice TalkBack: the chip's new value is read ("Checked").VoiceOver: the selected trait changes and is read ("Selected").Neither announces the row's scroll toward the near edge.Web: the focus stays on the chip; Enter on a choice chip changes nothing, so it does not scroll the row either; the scroll jumps at once under prefers-reduced-motion: reduce.
Figma's Preview Differs The Specification frame voices a Multi and a Single Choice chip as a button on TalkBack — "Apple, Not selected, Button, Double-tap to select" — and a Single Choice group on VoiceOver as one adjustable element ("Pizza. Adjustable…"). The DS follows its ChipsChoice contract: a chip that works like a checkbox or a radio is announced as one. The adjustable group was considered for a long Single Choice row and not taken — one element per chip stands (owner, 2026-11-12).
RTL And Text Scaling RTL: the row mirrors and scrolls from the right; swipe navigation follows the reading order.The chips scale to 150% — their Titles and Subtitles; Scroll rows grow taller, Flow rows wrap sooner. Dynamic Type the same.
Forced Colours The area draws nothing; each chip draws its own system-colour outline.
Target Size var(--sp-s48) — an M chip, the area's default.var(--sp-s40) — an S chip, under the floor — an accepted exception, as Button S (owner, 2026-11-12).var(--sp-s44) — the minimum target in the typography rules.
Reduced Motion The chips' motion is zeroed at the token; the scroll after a choice jumps at once.