Removable chip

A free value the user can take back: a pill with a round ✕ on the right, plus the dashed Přidat chip that adds another one. CSS apps/web/src/ds/inputs.css §14 (.acrm-rmchips, .acrm-rmchip, .acrm-rmchip-x, .acrm-rmchip-add). There is no React component.

State of play (4 Sep 2026): this pattern has no product call site. The only markup in the repository is the dev catalogue of inputs (apps/web/src/pages/DsInputsPage.tsx, route /ds/inputs), and shipped screens do the same job with Tag input (.acrm-tag, 24px, radius-sm, inside a field) or with Option chips. It is documented here because the CSS is in the app, and it is on the AD's desk whether it becomes the one chip of this kind or is removed — see docs/REVIEW-filter-family.md, decision F3.

When to use

  • Only where the design has been decided: a set of free values the user assembles by hand and can take back one at a time, outside a text field.

When not to use

  • Values typed into a field (tags, e-mails, phone numbers) — that is Tag input, which owns the field, the caret and the paste behaviour.
  • A closed set of options the user switches on and off — Option chips (.acrm-optchip.is-on).
  • Filter values in a listing — Filter chip; it carries the field name and its own menu.
  • Read-only labels — a chip with a ✕ promises removal; a label that cannot be removed must not look like one.

Anatomy

  • Row .acrm-rmchips: flex, flex-wrap: wrap, gap: var(--sp-2); there is no "+N more" fold — a long set simply wraps.
  • Chip .acrm-rmchip: 26px, padding: 0 4px 0 9px, --surface-75 fill, 1px solid var(--border), radius-pill, 500 12px, text --ink-800.
  • Remove .acrm-rmchip-x: 17×17px circle, transparent, --fg-muted glyph 12px; hover --active-surface and --ink-900.
  • Add .acrm-rmchip-add: 26px, 1px dashed var(--border-strong), radius-pill, text --fg-secondary, icon 14px; hover fills --hover-surface and the border goes --fg-muted.

Best practices

Do

  • Keep the remove control inside the chip, on the right — the whole chip is not a remove target.
  • Give the ✕ an accessible name that says what will disappear (Odebrat Praha).
  • Put the set under a <Field> label so it is clear what the values belong to.

Don't

  • Use it as a second Tag input. One field, one chip family — if the values are typed, use Tag input.
  • Mix it in a row with filter chips; two chip shapes in one line read as one broken control.
  • Draw it without the add chip and still expect the user to add values somewhere else.

Content

  • The chip carries the bare value: Praha, Investoři. No prefix, no count, no punctuation.
  • The add chip is a verb: Přidat.
  • tag-input — the same job inside a field; the pattern that actually ships.
  • option-chips — a closed set switched on and off.
  • filter-chip — a filter value with a field name and a menu.
  • Stories: components--removable-chip--default, --variants, --states, --composition.

Source: docs/filter/removable-chip.usage.md · GitLab