Tag input

A field that turns typed values into removable tags. App-css only: div.acrm-taginput > span.acrm-tag (text + button.acrm-tag-x with the x icon) … + borderless <input> (apps/web/src/ds/inputs.css §12); markup as in apps/web/src/pages/DsInputsPage.tsx and ProduktDetailPage. The screen keeps the tags in state: Enter adds the draft, the x removes a tag, Backspace on an empty draft removes the last one.

When to use

  • Free values typed by the user: labels, regions, keywords, industries without a fixed list.
  • Several short strings in one field where order is not meaningful.

When not to use

  • References to records (person, company, deal) — never an @ chip here; use Entity reference, Record select or the rail Tags editor (RailPickerMenu multi).
  • Values from a closed list — Multi-select or Option chips.
  • An active filter shown as label │ value — Filter chip; a removable item in a list — Removable chip (.acrm-rmchip).
  • Colour pills as tags — .acrm-pill is a status, not a value.

Anatomy

  • Container .acrm-taginput: display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--sp-1) var(--sp-2), border: 1px solid var(--border-strong), border-radius: var(--radius-sm), background: var(--surface-100) (--surface-50 in dark); :focus-within = accent border + 3px 16% accent ring. Wraps to more rows as tags are added.
  • Tag .acrm-tag: inline-flex, height: 24px, gap: 5px, padding: 0 4px 0 9px, background: var(--surface-75), border: 1px solid var(--border), border-radius: var(--radius-sm), font: 500 12px var(--font-sans), color: var(--ink-800).
  • Remove .acrm-tag-x: 17×17px <button>, border: 0, color: var(--fg-muted), border-radius: var(--radius-xs); hover background: var(--active-surface); color: var(--ink-900); icon 13px.
  • Input (> input): flex: 1; min-width: 60px; height: 24px; border: 0; outline: 0; background: transparent; font: var(--p); color: var(--ink-900); placeholder --fg-muted.
  • No size or variant modifiers; no disabled or error rule.

Best practices

Do

  • Add on Enter and on blur if the draft is not empty; trim and de-duplicate case-insensitively.
  • Give every .acrm-tag-x an aria-label with the tag name ("Remove B2B").
  • Wrap it in <Field label>; the hint tells what a tag is ("Enter adds a tag").
  • Keep tags neutral (--surface-75); colour belongs to status pills, not to values.

Don't

  • Using it for record references — the app has Entity reference for that, and mixing both is confusing (card Inputs, still true).
  • A fixed height or overflow: hidden — the field is meant to grow.
  • Coloured or pill-shaped tags; the tag is a quiet --radius-sm box.
  • Suggestions dropdown bolted on — that is a Record select (type D) or Combobox.

Content

  • Tags are short nouns as typed; do not change case (a user's "B2B" stays "B2B").
  • Placeholder "Add a tag…" (verb, ellipsis); empty when tags exist is fine, the field is still clickable.
  • Label names the set ("Tags", "Keywords"), the hint explains the gesture if the screen needs it.
  • removable-chip — a removable item outside a field.
  • multi-select, option-chips — values from a closed list.
  • entity-ref (variant removable), record-select — references to records.
  • Stories: components--tag-input--default, components--tag-input--states, components--tag-input--composition.

Source: docs/text-field/tag-input.usage.md · GitLab