Chip

Chips are compact elements that represent an input, attribute, or action.

Overview

The catnip-chip component displays a compact label with an optional leading icon. It operates in two mutually exclusive modes:

Removable (default): Displays a trailing remove button that emits a remove event when clicked. Useful for displaying tags or selected items that the user can dismiss (e.g. values picked from a dropdown or typed into an input).
Selectable: The chip wraps a visually-hidden native <input type="checkbox">, making the entire chip a checkable option. Selection state is controlled with model-value / update:modelValue (or v-model). Use selectable chips to present a list of predefined filter options the user can check or uncheck.
Read-Only: Both removable and selectable chips can be set to a non-interactive, muted visual state using the readonly boolean. Remove buttons are hidden and checkbox interactions are prevented, but the chip remains focusable so screen readers can still announce its value.

The default slot content is required and provides the accessible name for the chip. A dev-mode warning is logged if it is empty.
Removable mode: Uses a <span> with role="group" as the container. The remove button is a native <button> with an aria-label that includes the chip text for context (e.g. "Remove Apple"). The remove button meets the WCAG 2.2 AA minimum target size of 24×24 px.
Selectable mode: Uses a <label> wrapping a visually-hidden native <input type="checkbox">. Screen readers announce the chip as a checkbox with checked/unchecked state (e.g. "Design, checkbox, checked"). This follows the WAI-ARIA Checkbox Pattern — the correct semantic for selecting options from a set. The native checkbox provides built-in keyboard support (Space to toggle) and proper state announcements without ARIA overrides.
Read-Only mode: The chip remains focusable (tabindex="0" for removable, native checkbox for selectable) so screen readers can discover and announce its value, but interactions are prevented.
Grouping: When selectable chips are used as filter options, consumers should wrap them in a container with role="group" and aria-label (e.g. aria-label="Filter by category") so screen readers announce the group context.
Meet contrast requirements for text and icons on the chip surface (WCAG AA).