i

Selectable tag

Choosing · researched

A tag that toggles on and off when clicked, used to choose or filter.

atom · Carbon: SelectableTag · also called Filter chip, Checkable tag

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.CheckableTag native: no antd 6.6.5
Variants
—
Sizes
—
States documented
disabled
Accessibility guidance
no

Span with role=checkbox, aria-checked, tabIndex and key handler (not a native input). Props: checked, onChange, icon.

1 corrected on re-read
  • states_documented: null → ["disabled"] Tag.CheckableTag API row: disabled "Disable check/uncheck"

docs ↗ · code ↗

Carbon

Selectable tag native: yes @carbon/react 1.117.0
Variants
—
Sizes
sm, md, lg
States documented
default, hover, focus, disabled, loading
Accessibility guidance
yes

Tag rendered as a button with aria-pressed (Tag.tsx switches to a button element when clickable). Colour types same as Tag.

2 corrected on re-read
  • states_documented: ["hover","focus","disabled"] → ["default","hover","focus","disabled","loading"] Tag States: selectable enabled, hover, focus, selected, disabled, skeleton
  • urls: {"docs_url":"https://carbondesignsystem.com/components/tag/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tag"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/tag/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tag"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/tag/guidelines; code URL 200

docs ↗ · 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 not interactive; no toggleable or filter tag.

Material Web

Filter chip (<md-filter-chip>) native: partly @material/web 2.5.0
Variants
elevated, removable
Sizes
—
States documented
disabled
Accessibility guidance
yes

Agree with index. Primary action is a native button with aria-pressed; selected state shows a checkmark. Chip page has one shared Accessibility section.

docs ↗ · code ↗

Primer

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

No toggleable tag. Token has an isSelected prop that only sets a data attribute for styling; selection is not documented as a toggle. SegmentedControl is a single-choice control, not tags. Checked: primer.style/product/components/ index, internal-components list, ui-patterns, packages/react/src tree (incl. deprecated/, experimental/, internal/).

Spectrum

Tag group (selectionMode) variant native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L
States documented
default, hover, active, focus, disabled, error
Accessibility guidance
yes

Index disagreement: it said not shipped. S2 TagGroup takes selectionMode single or multiple (S2 TagGroup.mdx 'Selection and actions'), and the rsp Tag page documents a Selected state; v3 has the same. SWC 1st-gen sp-tag only offers deletable, not selectable. Installed SWC 1.12.4 tags therefore lacks selection.

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 toggleable tag. Tag docs say tags may be interactive but ship only a static usa-tag.

Platform facts

Native elementbutton (toggle)APG Button: a toggle button is a two-state button using aria-pressed; the label must not change with state. A checkbox (input type=checkbox) is the alternative. The sources do not say which a tag uses.
Baseline—
APG patternbutton
ARIA role—
Shipped by4 of 7 systems

Anatomy

  1. label — Plain term.
  2. toggle control — APG Button: toggle button with aria-pressed.

Keys the APG binds

  • SpaceActivates the button.
  • EnterActivates the button.

The seven states

default Off or on (aria-pressed false/true).
hover Pointer-only CSS state; not defined by APG or HTML.
focus Native button is focusable and takes the browser focus ring.
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled disabled attribute on a native button. APG Button: when the action is unavailable a custom button has aria-disabled set to true.
error n/a — Not defined.
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.