Chip

A square bordered token for a filter, a removable value or a static tag; a pressed filter chip takes the selection fill and a check glyph.

stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifest Canonical JSON Vue gallery ↗Prepare an agent kit →

Live variants

filter

Markup

<j3w1-chip id="example-chip-filter"><button class="chip chip-filter" type="button" aria-pressed="false"><span class="chip-check" aria-hidden="true">✓</span><span class="chip-label">Navigation</span></button></j3w1-chip>

removable

tabs

Markup

<j3w1-chip id="example-chip-removable"><span class="chip chip-removable"><span class="chip-label">tabs</span><button class="chip-remove" type="button" aria-label="Remove tabs"><span aria-hidden="true">×</span></button></span></j3w1-chip>

static

Markup

<j3w1-chip id="example-chip-static"><span class="chip chip-static"><span class="chip-label">R1</span></span></j3w1-chip>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@4.0.0

import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/chip.css';
import '@j3w1/ui/register/chip';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@4.0.0 j3w1-ui copy chip --out ./vendor/j3w1/chip

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

Name	Type / signature	Meaning
`disabled`	`CustomEvent`	Disable the native controls owned by this instance.
`loading`	`CustomEvent`	Mark the primary control busy and prevent duplicate activation.

properties

Name	Type / signature	Meaning
`disabled`	`boolean`	Delegates disabled state to native children.
`name`	`string`	Native control name; application form keys remain explicit.

methods

Name	Type / signature	Meaning
`refresh`	`(): void`	Reconnect behavior after replacing native child structure.
`focus`	`(options?: FocusOptions): void`	Focus the first usable native control.
`dismiss`	`(id?: string): void`	Dismiss a message; focused actions move to the next available control.

events

Name	Type / signature	Meaning
`j3w1-dismiss`	`CustomEvent`	Cancelable message dismissal.
`j3w1-retry`	`CustomEvent`	Request recovery; the host owns the result.
`j3w1-action`	`CustomEvent`	An explicit message action.

Dependencies and verification

Registered components: none. Style dependencies: none.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Specimen density

Specimen profile

Chip `chip`

Family: Information display
Maturity: stable
Priority: R1
Since: 0.1.0
Native control: native button with aria-pressed for filters; a span with a labelled remove button for values; a plain span for tags
specified
demonstrated

A square bordered token for a filter, a removable value or a static tag; a pressed filter chip takes the selection fill and a check glyph.

Report an issue with this component

Tokens

Focus a role to inspect its values; follow its link for persistent usage and source details.

Part	Role	Value	Use
`root.bg`	`color.surface.default`approveduse	`#0d0707`	D-041 surface.default: color.primitive.modern.panel.
`root.border`	`color.border.control`approveduse	`#c81a1a`	D-041 owner correction: red control and floating-frame borders, distinct from rose text.
`root.text`	`color.text.default`approveduse	`#e99499`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`root.bg-hover`	`color.interaction.hover.bg`approveduse	`#1c1010`	D-041 interaction.hover.bg: color.primitive.modern.hover.
`root.bg-pressed`	`color.interaction.pressed.bg`observeduse	`#420f0c`	Pressed fill.
`root.ring`	`color.interaction.focus.ring`observeduse	`#e53935`	1px dashed focus ring on controls and rows.
`root.text-disabled`	`color.text.disabled`approveduse	`#a3676b`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`root.border-disabled`	`color.border.disabled`approveduse	`#482b2b`	D-041 border.disabled: color.primitive.modern.divider.
`root.bg-disabled`	`color.interaction.disabled.bg`approveduse	`#0d0707`	D-041 interaction.disabled.bg: color.primitive.modern.panel.
`selected.bg`	`color.interaction.selection.bg`approveduse	`#531310`	Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection.
`selected.text`	`color.interaction.selection.text`observeduse	`#f4eeee`	Text on the selection.
`selected.ring`	`color.interaction.focus.ring`observeduse	`#e53935`	1px dashed focus ring on controls and rows.
`remove.text`	`color.text.muted`approveduse	`#d4868b`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`remove.text-hover`	`color.text.bright`approveduse	`#ffa2a7`	D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills.
`remove.bg-hover`	`color.interaction.hover.bg-strong`approveduse	`#1c1010`	D-041 interaction.hover.bg-strong: color.primitive.modern.hover.

State matrix

Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).

State	Removable	Static
`default`	tabs	R1
`hover`
`focus-visible`
`selected`
`selected+focus-visible`
`disabled`

Purpose

One value the user can toggle or remove: a filter, a multiselect choice, a record’s tag. A chip that only informs is a badge; one that runs an action is a button.

Anatomy

Parts as listed in the anatomy; a static chip is a span with nothing else.

States

State	Visual	Non-colour channel
default	1px `color.border.control` on `color.surface.default`; text `color.text.default`	—
hover	background → `color.interaction.hover.bg`; remove button → `color.interaction.hover.bg-strong` with `color.text.bright`	cursor: pointer
focus-visible	1px dashed `color.interaction.focus.ring` at −2px on the chip or the remove button	the ring
selected	fill `color.interaction.selection.bg`; text and glyph `color.interaction.selection.text`; border takes the fill colour	`aria-pressed="true"`; the ✓ glyph
selected+focus-visible	the fill and 1px dashed `color.interaction.focus.ring` at −2px	both visible at once
disabled	`color.text.disabled`, `color.border.disabled`, `color.interaction.disabled.bg`; no hover	`disabled`; cursor: not-allowed

A filter chip shows color.interaction.pressed.bg only while pressed. Precedence: disabled > selected > hover; focus-visible is always drawn.

Keyboard

As in the key table. The label of a removable chip is not focusable; inside a token field the field owns Backspace and the arrow keys.

Accessibility

A filter chip keeps the same label in both states; the ✓ is aria-hidden. The remove button’s name (“Remove ”) is unambiguous out of context; removing a chip moves focus to the next chip or the field. Text meets 4.5:1; border and rings 3:1. Chips and remove buttons are at least 24×24 CSS pixels in compact, with 4px between neighbours.

Portability

A bordered box with a background and an outline; the remove control is an ordinary small button. Native toggle buttons take the fill for the checked state. A host without a glyph draws the check as a 2px inset rule at the inline start and records it.

Non-examples

Pill or rounded chips. A selected chip shown by border colour alone, without the fill and aria-pressed. A nameless ×. A chip that is a link. A static tag that reacts to hover. Disabling by opacity. A label clipped by the border. A chip in caption type (that is a badge).

Contrast report

13 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.

Pair	State	Kind	Foreground	Background	Ratio	Min	Result
chip default text	default	text	`color.text.default` `#e99499`	`color.surface.default` `#0d0707`	8.72	4.5	pass
chip default border	default	ui	`color.border.control` `#c81a1a`	`color.surface.default` `#0d0707`	3.44	3	pass
chip hover text	hover	text	`color.text.default` `#e99499`	`color.interaction.hover.bg` `#1c1010`	8.10	4.5	pass
chip hover border	hover	ui	`color.border.control` `#c81a1a`	`color.interaction.hover.bg` `#1c1010`	3.20	3	pass
chip focus-visible text	focus-visible	text	`color.text.default` `#e99499`	`color.surface.default` `#0d0707`	8.72	4.5	pass
chip focus-visible border	focus-visible	ui	`color.border.control` `#c81a1a`	`color.surface.default` `#0d0707`	3.44	3	pass
chip focus-visible outline	focus-visible	ui	`color.interaction.focus.ring` `#e53935`	`color.surface.default` `#0d0707`	4.73	3	pass
chip selected text	selected	text	`color.interaction.selection.text` `#f4eeee`	`color.interaction.selection.bg` `#531310`	12.47	4.5	pass
chip selected+focus-visible text	selected+focus-visible	text	`color.interaction.selection.text` `#f4eeee`	`color.interaction.selection.bg` `#531310`	12.47	4.5	pass
chip selected+focus-visible outline	selected+focus-visible	ui	`color.interaction.focus.ring` `#e53935`	`color.interaction.selection.bg` `#531310`	3.38	3	pass
remove glyph at rest	—	text	`color.text.muted` `#d4868b`	`color.surface.default` `#0d0707`	7.22	4.5	pass
disabled chip text (exempt; house floor 3:1)	disabled	ui	`color.text.disabled` `#a3676b`	`color.interaction.disabled.bg` `#0d0707`	4.48	3	pass
disabled chip border (exempt)	disabled	ui	`color.border.disabled` `#482b2b`	`color.interaction.disabled.bg` `#0d0707`	1.58	1	pass

Keys

Key	Action
`Tab / Shift+Tab`	Reaches a filter chip, or the remove button of a removable chip; static chips are skipped.
`Space / Enter`	Toggles a filter chip; activates the remove button.
`Backspace / Delete`	In a token field, removes the chip before the caret (the field's contract, not the chip's).

For agents

Component JSON ·Implementation brief ·Build a task kit ·

Stress fixtures: FX-LONG FX-320 FX-ZOOM-200 FX-I18N FX-RTL FX-RM FX-HC FX-TOUCH FX-STATE-MATRIX

j3w1 / theme

j3w1 / command

Chip

Live variants

filter

removable

static

Install and register

Copy the complete implementation

Public API

attributes

properties

methods

events

Dependencies and verification

Canonical specification

Chip `chip`

Tokens

State matrix

Purpose

Anatomy

States

Keyboard

Accessibility

Portability

Non-examples

Contrast report

Keys

For agents

Live variants

filter

removable

static

Install and register

Copy the complete implementation

Public API

attributes

properties

methods

events

Dependencies and verification

Canonical specification

Chip chip

Tokens

State matrix

Purpose

Anatomy

States

Keyboard

Accessibility

Portability

Non-examples

Contrast report

Keys

For agents

Chip `chip`