> ## Oymyakon DS index > Fetch the full index at: https://super-dollop-pzmo65r.pages.github.io/llms.txt > HTML preview: https://super-dollop-pzmo65r.pages.github.io/chips-action.html > Source: specs/components/chips-action/chips-action.md, specs/components/chips-action/chips-action-a11y.md, specs/components/chips-action/capabilities.json --- # ChipsAction · Oymyakon DS 3 > A compact pill-shaped button for a quick action: it opens an input — a sheet or a modal — and > then shows the chosen value, or fills a field with a ready-made value in one tap. **Version:** 3.1.5 · **Status:** Ready · **Figma:** `[ChipsAction] 3.1` (main components file `7vdl5YkZFDWvh9QvSmydsH`, page `6388:540`; sets `M-ChipsAction` `10997:5719` (key `b99e0481…`) and `S-ChipsAction` `22962:21969` (key `22777fb2…`); private slot sets `.↳🔴Slot#1` `10086:29717` and `.↳🔵Slot#2` `10086:29850`; press staging `.ChipsItemPressedAnimation` `10318:22084`; Specification frame `6390:17466` (the 3.0 Chips spec); update frame `Update 3.1` `22838:14180`) --- ## 1. Description ChipsAction is a pill-shaped button that holds a short title — or only an icon — and runs one action on tap. It is used on its own or in a row of chips for quick value input (Figma `Update 3.1`): - **Action** — the chip opens an additional input interface, a bottom sheet or a modal; once the value is entered there, the chip shows it in place of its title ("Schedule delivery" → "20 November, 09:00 AM", the Figma usage example). A chevron in the end slot says that the chip opens something. - **Suggest** — the chip offers a ready-made value for a text field ("I'm here", "Where are you?", a standard cargo weight); a tap fills the field, so there is less to type. ChipsAction is not selectable: it has no Active state and no selection binding. Choosing one or several options from a set is [ChipsChoice](https://super-dollop-pzmo65r.pages.github.io/chips-choice.md) — the other half of the 3.1 split (Figma `[ChipsChoice] 3.0`, "Rename ChipsItem to ChipsChoice"). The 3.1 update also changed the Standard fill from `Surface/OnGrey` to `Background/Primary` for both ChipsAction and ChipsChoice. ### Platform implementations | Platform | Entry point | Version | Notes | |---|---|---|---| | iOS | `DsChipsAction` (DS3) | Figma 3.1 | `init(size:title:)` with `DsChipsChoiceSize.m` / `.s`; `subtitle`, `counterValue(Int?)`, `indicatorType(DsIndicatorType?)`, `leadingSlot { }` / `trailingSlot { }`, `.disabled(true)`, `.isLoading(true)`; icon-only = an empty title and a `leadingSlot` (manifest bindings) | | Android | `DsChip.Action` (`core.compose.ds.v3.chip`) | Figma 3.1 | `size = DsChip.Size.M` / `.S`; `title: DsString?` (null = icon-only), `subtitle`, `counter: Long?`, `indicator: DsChip.Indicator?` (null value = a dot), `startSlot` / `endSlot` take `DsChip.Slot.Icon` / `.Indicator` / `.Avatar`; `enabled`; Skeleton is ambient through `DsSkeletonState` (manifest bindings) | | Flutter | — | — | Not shipped | | Web | `src/shared/shared.css` (`.chips-action`) | 3.1.0 | Reference implementation, this repo; preview page `src/chips-action.njk` | On both platforms the chips also live inside a chips area (`DsChipsArea` / `DsChipArea`, Figma `[ChipsArea] 3.0`) that lays a row out and forces one size onto every chip — on the web the [ChipsArea](https://super-dollop-pzmo65r.pages.github.io/chips-area.md), whose Suggest preset is a row of ChipsAction chips. The area is not part of this spec. --- ## 2. Anatomy ``` ChipsAction (.chips-action) button · hug × min s48 (M) / s40 (S) · min width s64 ├── Content (.chips-action__content) the row that scales on press · gap s0 │ ├── Start slot (.chips-action__slot--start) optional · s24 · Icon / Number Indicator │ ├── Text container (.chips-action__text) one column · s4 left / right padding · absent in Icon │ │ ├── Line (.chips-action__line) gap s4 │ │ │ ├── Title (.chips-action__title) Main Body · one line │ │ │ └── Counter (.chips-action__counter) optional · Main Body · TextAndIcon/Secondary │ │ └── Subtitle (.chips-action__subtitle) optional · Caption │ └── End slot (.chips-action__slot--end) optional · s24 · Icon / Number Indicator / Chevron / Delete └── Indicator (.indicator.chips-action__indicator) optional · Simple L s12 · top end corner ``` | Part | Required | Description | |---|---|---| | **Container** | Required | A pill: hugs its content, minimum width `s64`, minimum height `s48` (M) / `s40` (S), padding `s12` at the start and end, radius full, a `s2` inside border. The whole container is the tap target | | **Content** | Required | The row of the slots and the text, centred in the container. On press it scales as one piece; the container and the Indicator stay still. The Figma press staging (`.ChipsItemPressedAnimation`) scales this inner row as one frame — the web names it `__content` | | **Start slot** | Optional (on in Icon type) | Figma `🔴Slot#1`, a `s24` box, content centred: an icon (any DS icon, s24) or a [Number Indicator](https://super-dollop-pzmo65r.pages.github.io/indicator.md) L. Figma also offers an Avatar — no web build of Avatar exists | | **Text container** | Icon + Title type | Figma `TextContainer`: ONE container holding the Title line (Title + Counter) and the Subtitle as a centred column — `s4` padding left and right, `s0` top and bottom, `s0` between the two lines. Its side padding is the gap between the text and a slot or the chip's edge | | **Title** | Required in the text | One line in `Body/Main Body`. The chip hugs it — no truncation in Figma; the web keeps it on one line | | **Counter** | Optional, off | Figma `Counter`: a number after the title, `s4` from it, in `Body/Main Body` and `TextAndIcon/Secondary` — "Breakfast 12" | | **Subtitle** | Optional, off | A second line under the title, in `Caption/Caption`. With a subtitle the text is two lines (20 + 16 = 36), still inside the s40 / s48 container | | **End slot** | Optional, off | Figma `🔵Slot#2`, a `s24` box: an icon, a Number Indicator L, the **Chevron** ("chevron-down" — the chip opens a choice) or the **Delete** icon ("close-small" — the tap removes the value). Figma also offers an Avatar (no web build) | | **Indicator** | Optional, off | An [Indicator](https://super-dollop-pzmo65r.pages.github.io/indicator.md) Simple L (`s12` dot), absolutely positioned on the container's top end corner (top right in LTR). It does not take part in the layout, and it does not move on press | - The two slots and the text are optional, but a chip always shows an icon or a title: Figma's two Chip Types are **Icon** (the start slot alone) and **Icon + Title** (the title with the slots optional — off by default). - The Delete icon is a cue, not a second button: the whole chip is one target, and its one action is the removal. ### RTL layout `RTL = true` mirrors the row: the start slot goes to the right edge, the end slot to the left, the Counter to the left of the Title, and the Indicator to the top left corner. "chevron-down", "close-small" and the heart icon are symmetric and do not flip. On the web the root's direction (`dir="rtl"` on it or an ancestor) mirrors the row and moves the Indicator (`inset-inline-end`). --- ## 3. Variants and sizes Two sizes, published in Figma as two component sets — the web presets. | Axis | Values | Default | Web mechanism | |---|---|---|---| | **Size** (preset) | `m` · `s` | `m` | The bare `.chips-action` is M (min height `s48`); `.chips-action--s` is S (min height `s40`). `data-ds-preset="m"` / `"s"` | | **Chip Type** | `icon-title` · `icon` | `icon-title` (Figma Icon+Title) | `.chips-action--icon` with the start slot alone and no `.chips-action__text`; the button then takes an `aria-label`. The modifier sets the Skeleton width (`s64`) | | **State** | `standard` · `disabled` · `skeleton` | `standard` (Figma Default) | `disabled` on the ` ``` A chip with a title takes its name from its own text — the Title, the Counter and the Subtitle, in that order, with a `.visually-hidden` ", " before the Counter and before the Subtitle (so "Breakfast" and "12" never run together into one word); an Indicator's meaning is a `.visually-hidden` span after them ("new items"). An Icon chip takes an `aria-label`. A chip that opens a modal sheet carries `aria-haspopup="dialog"` (dropped while disabled) and the field heading as `aria-describedby`; a Delete chip is named by `aria-label="Remove [Title]"`; a Number Indicator in a slot adds a `.visually-hidden` phrase after the text (", 2 applied"). Disabled is the native `disabled` attribute plus `data-ds-state="disabled"`; Skeleton is `.chips-action--skeleton` with `aria-hidden="true"`, `inert` and no content. --- ## Changelog | Version | Date | Change | |---|---|---| | 3.1.5 | 2026-11-12 | `aria-disabled="true"` renders as Disabled — drawn and announced the same, refusing the activation, focusable — for a disabled ChipsArea (3.0.1). | | 3.1.4 | 2026-11-12 | The Caption Subtitle inside the control is accepted — the typography rules' exception for a control's secondary line (owner ruling; `typography-rules.md` § 11.2). Status Draft → Ready (owner). | | 3.1.3 | 2026-11-12 | S at 40 recorded as an accepted exception to the 44 touch-target floor, as Button S (owner ruling; `typography-rules.md` § 12). The Caption-subtitle flag stays open. | | 3.1.2 | 2026-11-03 | ChipsArea shipped on the web: § 1 and § 9 link [ChipsArea](https://super-dollop-pzmo65r.pages.github.io/chips-area.md) (the Suggest preset) in place of "Figma only". | | 3.1.1 | 2026-10-29 | The pressed-overlay flag corrected: the frame's "#000000, opacity 8%" is a detached copy; the components use the style `State/PressedStateOverlay` (10%) = `--shadow-pressed`, the one press token. ChipsChoice 3.0.0 shipped on the web: the description, "When not to use" and "Related components" link to it instead of calling it Figma only. Page: non-tokens moved out of token chips (`pushButton` → plain text, the curve → `var(--curve-standard-ease-in-out)`, the `--component-*` glob → code). No change to the component. | | 3.1.0 | 2026-10-27 | Initial spec, from the Figma `[ChipsAction] 3.1` page in the main components file (page `6388:540`): the `M-ChipsAction` (`10997:5719`) and `S-ChipsAction` (`22962:21969`) sets, the private slot sets (`10086:29717`, `10086:29850`), the press staging (`10318:22084`), the 3.0 Chips Specification frame (`6390:17466`) and the `Update 3.1` frame (`22838:14180`). A pill-shaped button — min `s64` × `s48` (M) / `s40` (S), padding `s12` at the sides, radius full (`s96`), a `s2` inside `Border/Default` border kept outside the layout as in Figma (an inset ring on the web) on `Background/Primary` (3.1: was `Surface/OnGrey`). Chip Type Icon + Title (the Title in Main Body with an optional Counter in Secondary after it and an optional Caption Subtitle under it; start and end `s24` slots optional) and Icon (the start slot alone). Slots: an icon or a Number Indicator L; the end slot also the Chevron or the Delete icon; Avatar not on the web. Optional Simple L Indicator on the top end corner. States Standard (Figma Default) · Disabled (content in `TextAndIcon/Disabled`, fill and border unchanged, no Indicator) · Skeleton (an empty `s64` / `s124` pill on `Skeleton/OnWhite` with the shimmer); Hover / Pressed = the `--shadow-pressed` overlay, Pressed also scales the content to 95% (`pushButton`) while the pill and the Indicator stay still; Focus (web) = `Border/Inform`. RTL mirrors the row and the Indicator. Two presets (`m`, `s`); colour defaults re-pointable through `--chips-action-fill` / `--chips-action-border` and the root colour. Figma flags: the pressed overlay written as a raw "#000000, opacity 8%"; the Skeleton variants bind `Surface/OnWhite`; the slot sets' Number Indicator binds `Accent/Red 1` (the Indicator is Red 2). Spec-reviewer (0 critical, 1 high, 4 medium, 6 low) and a11y-reviewer (0 critical, 3 high, 7 medium, 5 low) passes folded in before release: a forced-colours outline (the ring is a `box-shadow`); a Delete chip named "Remove [Title]" on every platform (was the Title + a hint); a slot's Number Indicator spoken with the screen's word; the TalkBack Chevron hint names the field, the field heading is the chip's description on the web; a disabled chip drops its hint and `aria-haspopup`; focus after a removal (neighbour, else the row's owner) before the announcement; long text capped with an ellipsis; a contrast floor for re-pointed fills; reduced motion = the press applies at once (not "no scale"); the focus ring eases with the overlay; `onlyWhen` gating in the contract. Flagged for the owner: S at 40 is under the 44 touch-target floor of the typography rules (as Button S); Caption in an interactive control (the Figma Subtitle). | --- # ChipsAction — Accessibility ChipsAction is **one button**: the whole chip is the tap target and one focus stop, whatever it holds. Its name is its text, read in visual order — **[Title], [Counter], [Subtitle]** — and the icons in its slots are not announced (Specification frame, "Accessibility. Android. TalkBack" / "Accessibility. iOS. VoiceOver", the Action blocks). The screen supplies three things the chip cannot know: - **An Icon chip's label** — the action it runs ("Favourites", "Call the driver"), never the icon's name ("heart"). - **The Indicator's meaning** — what the dot or the count stands for: "new items" for a Simple dot, "2 new items" for a Number Indicator. It is appended after the text. - **What the tap does** when the end slot shows it: the Chevron — the chip opens a choice, and the hint names the field; the Delete icon — the tap removes the value, and the **name** carries the verb ("Remove Courier"), since hints can be switched off and a one-tap removal must not sound like any other chip. | Visible | Announced (TalkBack) | |---|---| | Breakfast 12 / Schedule delivery | "Breakfast, 12, Schedule delivery, Button, Double-tap to activate" | | Breakfast 12 / Schedule delivery + dot | "Breakfast, 12, Schedule delivery, new items, Button, Double-tap to activate" | | Breakfast 12 / Schedule delivery + count 2 | "Breakfast, 12, Schedule delivery, 2 new items, Button, Double-tap to activate" | | Schedule delivery ⌄ | "Schedule delivery, Button, Double-tap to choose pickup time" | | 20 November, 09:00 AM ⌄ (after the sheet) | "20 November, 09:00 AM, Button, Double-tap to choose pickup time" | | Courier ✕ | "Remove Courier, Button, Double-tap to activate" | | Filters 2 (a count in the end slot) | "Filters, 2 applied, Button, Double-tap to activate" | The first three rows are the Figma voiced previews. The last two are an Action chip from the Figma usage example: once the value is entered in the sheet, it replaces the title — the chip reads the value as its name. The field's own heading ("Pickup time") is the screen's: the hint names it, and on the web it is the chip's description, so a person who lands on the chip after the sheet still hears what the value is. --- ## Android · TalkBack | Element | Label | Value | Trait | Hint | |---|---|---|---|---| | Chip (Icon + Title) | "[Title], [Counter], [Subtitle]" — `contentDescription`; "Remove [Title]" with Delete | — | Button — `Role.Button` | "Double-tap to activate." — `onClick(label = "activate")`; "choose [field]" with the Chevron | | Chip (Icon) | The screen's action name — `contentDescription` | — | Button — `Role.Button` | As above | | Indicator, or a Number Indicator in a slot | Its meaning from the screen, appended to the label | — | — | — | | Slot icons, Chevron, Delete icon | — | — | Decorative — not nodes | — | Voiced previews: - "Breakfast, 12, Schedule delivery, Button, Double-tap to activate." - "Favourites, new items, Button, Double-tap to activate." - "20 November, 09:00 AM, Button, Double-tap to choose pickup time." - "Remove Courier, Button, Double-tap to activate." ### Edge states - **Disabled:** `enabled = false` (`disabled()` semantics). TalkBack keeps the chip in swipe navigation, appends "Disabled" and drops the hint: "Breakfast, Button, Disabled." A double-tap does nothing. The Disabled chip carries no Indicator, so nothing is appended for it. - **After the input sheet closes** (an Action chip): focus returns to the chip, which now reads the value as its title — "20 November, 09:00 AM". No separate announcement. - **Delete:** after the removal the chip leaves the row. The focus moves **first** — to the next chip in the row, to the previous one when it was the last, or to the row's owner (the field heading or the control that holds the row) when no chip is left — and **then** the removal is announced once, politely: "[Title] removed". - **Number Indicator in a slot:** read as part of the label, with the screen's word — "2 new items", never "2" alone. - **Skeleton:** not announced, not focusable — `clearAndSetSemantics {}` on the shape; the loading container announces once, politely. - **RTL:** the row mirrors; the label order stays Title, Counter, Subtitle — the reading order of the language. - **Text scaling:** Title, Counter and Subtitle scale to 150%, the DS maximum. --- ## iOS · VoiceOver | Element | Label | Value | Trait | Hint | |---|---|---|---|---| | Chip (Icon + Title) | "[Title], [Counter], [Subtitle]" — `accessibilityLabel`; "Remove [Title]" with Delete | — | `.button` | — by default; "Opens [field] selection." with the Chevron — `accessibilityHint` | | Chip (Icon) | The screen's action name — `accessibilityLabel` | — | `.button` | As above | | Indicator, or a Number Indicator in a slot | Its meaning, appended to the label | — | — | — | | Slot icons, Chevron, Delete icon | — | — | Decorative — `accessibilityHidden(true)` | — | Voiced previews: - "Breakfast, 12, Schedule delivery, Button." - "Breakfast, 12, Schedule delivery, 2 new items, Button." - "20 November, 09:00 AM, Button. Opens pickup time selection." - "Remove Courier, Button." Apple's hint idiom — a verb phrase that describes the result, never the gesture. The Figma iOS previews add "Double-tap to activate" to the Indicator rows; VoiceOver speaks its own usage hint after a pause, so the chip sets none of its own for a plain action. ### Edge states - **Disabled:** `.notEnabled` — VoiceOver appends "Dimmed": "Breakfast, Dimmed, Button." It stays in navigation; a double-tap does nothing. The hint is cleared while disabled — VoiceOver would still speak it, and a dimmed Chevron chip must not say it opens anything. - **After the input sheet closes:** focus returns to the chip (`UIAccessibility.post(notification: .layoutChanged, argument: chip)`), which reads the new value. - **Delete:** as on Android — the focus moves first (`.layoutChanged` with the neighbour or the row's owner as the argument), then the announcement (`AccessibilityNotification.Announcement`) "[Title] removed" is posted; posted together, the announcement is easily cut off by the focus change. - **Skeleton:** `accessibilityHidden(true)` on the shape (`.isLoading(true)` alone does not hide it); the loading container announces once. - **RTL / Dynamic Type:** as on Android. --- ## Web preview (reference) - **A `