Chip

A removable tag, or a filter when it wraps a checkbox.

.chip aequitas.js

Examples

Removable

Design CSS

Filters

Design Engineering Shipped

Anatomy

`span.chip`	Removable tag: the label text, then an optional remove button.
`> button`	Optional remove control, sized to the text. With `data-dismiss=".chip"` aequitas.js removes the chip.
`label.chip`	Filter chip: a `<label>` wrapping its checkbox.
`> input[type=checkbox]`	Stretched invisibly over the chip. Checked, the chip tints in its tone and draws an edge along the bottom.

API

Attribute	Values	Description
`data-tone`	`accentsuccesswarningdangerinfo`	On a filter chip, colours the checked tint and edge. Default accent.
`data-dismiss`on `button`	`<selector>`	On the remove button: aequitas.js removes the closest match. Without a value it removes the closest `.alert`, `.toast` or `.chip`.

Behaviour

Clicking a [data-dismiss] button removes the closest chip (or whatever selector it names) and moves focus to the next focusable element, the previous one when nothing follows. Without aequitas.js the button renders but does nothing; filter chips are plain checkboxes and need no script.

From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.

Accessibility

The remove button shows only ×; give it an aria-label that names the chip ("Remove Design").
When focus was on the remove button, aequitas.js moves it to the next focusable element (the next chip's button, or the input in a tag input), so it never drops to the page.
Filter chips are real checkboxes inside a <label>, so they announce their checked state. The state is shown by tint and edge, not colour alone.

Key	Effect
`Space`	Toggles a filter chip's checkbox.
`Enter` / `Space`	Activates the remove button.