i

Tag group

Showing state and identity · researched

A set of tags laid out together, handling overflow and keyboard navigation.

molecule

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Tag.CheckableTagGroup subset native: no antd 6.6.5
Variants
—
Sizes
—
States documented
disabled
Accessibility guidance
no

Index entry real but narrow: a div of CheckableTags managed as single or multiple choice (options, multiple, value). No overflow handling; each CheckableTag is span role=checkbox with tabIndex and key handler.

1 corrected on re-read
  • states_documented: null → ["disabled"] Tag.CheckableTagGroup API section lists disabled

docs ↗ · code ↗

Carbon

Tag overflow subset native: no
shipped, not drawn hereCarbon documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Unpublished: TagOverflow is not exported from @carbon/react 1.117.0 (checked require keys) and has no docs-site page; it shows tags and collapses extras into a popover or modal. No group component otherwise, and the index's one entry is only this.

· code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. Tag is a single static label; no tag group, overflow or keyboard-navigation component.

Material Web

Chip set (<md-chip-set>) native: no @material/web 2.5.0
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

Agree with index. Custom element that slots chips, role=toolbar via ElementInternals, manages roving tabindex and arrow-key navigation. Accessibility section: aria-label or aria-labelledby on the set. No overflow handling documented.

docs ↗ · code ↗

Primer

LabelGroup native: yes @primer/react 38.40.1
Variants
default, truncated
Sizes
—
States documented
—
Accessibility guidance
yes

Primer React. LabelGroup lays out Labels or Tokens in a ul with overflow handling (inline or overlay with a show-all button). Status ready.

2 corrected on re-read
  • builds_on_native: "no" → "yes" Default as='ul' with li per child (span when not a list)
  • variants: null → ["default","truncated"] Docs examples Default and Truncated; accessibility page says Truncated variant (overflowStyle inline|overlay)

docs ↗ · code ↗

Spectrum

Tag group native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L
States documented
default, hover, active, focus, disabled, error
Accessibility guidance
yes

Docs from the rsp page; sizes from TagGroup.json and S2 source; also removal and selection modes. Implementations: S2, v3, SWC 1st-gen sp-tags (role list, installed at 1.12.4 as tags) and spectrum-css taggroup 7.2.0. Index disagreement (partial): it also mapped MessageSuggestionList (experimental AI, S2) and Suggestion group (SWC gen2 experimental); those are reply-suggestion lists, not tag groups.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no tag group component or layout helper; only a single usa-tag exists.

Platform facts

Native elementnot recordedNo source defines a tag group. APG has no pattern; APG Toolbar and Grid are the nearest arrow-key navigation patterns, no source says a tag group follows either.
Baseline—
APG patterntoolbar
ARIA role—
Shipped by5 of 7 systems

Anatomy

    The seven states

    default Tags laid out.
    hover n/a — Container is not interactive.
    focus Inference: each interactive tag or its control can take focus.
    active n/a — Not interactive.
    disabled n/a — Not defined by APG or HTML.
    error n/a — Not defined by APG or HTML.
    loading n/a — Not defined.

    Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.