Components › Forms & input › Choice › Option chips

Option chips

canon

Row of selectable chips for a small set of options.

Used in 12 files · 5 areas · 21× — components/callwrapup, components/orders, components/segment, pages/PruvodceFirmyPage, pages/PruvodcePage

.acrm-optchips .acrm-optchipSourceStoryLegacy card Inputs.html
ExamplesCodeUsageAccessibilityChangelog

Row of selectable chips for a small set of options — a multi-toggle. App-css sub with no React export: the canonical markup is div.acrm-optchips > button.acrm-optchip(.is-on)[aria-pressed] > (svg)? + text (apps/web/src/ds/inputs.css §10; used in PruvodcePage, PruvodceFirmyPage, TagFilter, InteractionFilter, DealStageFilter, OwnerFilter).

When to use

  • Several values picked from a small visible set as clickable labels: industries, regions, filter tags.
  • Wizard steps where the whole set fits on screen and selection should be one click per value.
  • Filter panels in the segment builder where each chip is one tag or stage.
  • A trailing "add" chip with a plus icon when the user may add an own value (PruvodceFirmyPage).

When not to use

  • Exactly one value from the set — use Segmented control (short labels) or Radio.
  • A set that does not fit on screen or comes from records — use Multi-select or Record select (DS popover).
  • Free-text values typed by the user — use Tag input.
  • An active filter in a bar shaped "label │ value" with a close — that is the filter chip .acrm-fchip, not an option chip.
  • Record references (person, company, deal) — never a chip with "@"; use Entity reference.

Anatomy

  • Container: .acrm-optchips — flex, flex-wrap: wrap, gap: var(--sp-2).
  • Chip: button.acrm-optchip 30px high, padding: 0 var(--sp-3), gap: var(--sp-2), border: 1px solid var(--border-strong), border-radius: var(--radius-sm), background: var(--surface-100) (--surface-50 dark), font 500 12.5px var(--font-sans), color var(--ink-700), white-space: nowrap.
  • Hover: background: var(--hover-surface).
  • Selected .is-on: border-color: var(--accent) + box-shadow: inset 0 0 0 1px var(--accent) (2px accent frame), text var(--accent-ink); no fill — the frame rule from card Inputs, enforced by the CSS.
  • Leading icon > svg / > .ti: 15px, --fg-muted, turns --accent when on.
  • State: aria-pressed mirrors .is-on (TagFilter and the stories); PruvodceFirmyPage adds a trailing "×" icon on selected chips — page-level extra, not part of the canon.

Best practices

Do
  • Set aria-pressed on every chip so the state is announced.
  • Keep the set small (roughly ≤ 12 chips) and let the row wrap; width follows content.
  • Put the chips under a <Field label> with a hint when the step needs one ("Pick everything that applies.").
  • Place an own-value chip last, with the plus icon and the label "Add".
Don’t
  • Accent fill on a selected chip — selection is the frame plus accent text.
  • Chips as single-choice — a lone selected chip that unselects the others is a Segmented or Radio.
  • Removable chips for stored values — that is .acrm-rmchip; option chips toggle, they do not delete.
  • Custom chip heights or pill radius; the chip is 30px with --radius-sm.

Content

  • Chip labels in sentence case, short nouns: "IT & software", "E-commerce", "Manufacturing".
  • No trailing punctuation; a chip never wraps, so keep labels under ~3 words.
  • Icons only when they add meaning across the whole set (channel: phone, mail, calendar); do not mix chips with and without icons.
  • Own-value chip label: "Add" (common:add).
  • segmented-control — exclusive choice with the same footprint.
  • removable-chip — stored values removed with a close.
  • checkbox — the same multi-choice in a vertical form list.
  • Stories: components--option-chips--default, components--option-chips--states, components--option-chips--with-icon-kbd, components--option-chips--composition.

Source: docs/choice/option-chips.usage.md · GitLab