# Chip Select

> A token-driven multi-select chip group of aria-pressed toggle buttons that take an accent-tinted fill, readable accent text, and a check when selected, with a live selected-count summary.

- Category: Checkbox
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: chip, multi-select
- Page: https://builder.atheros.ai/components/chip-select
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_chip_select/preview-ad2a6696c1f4.webp

## Features

- Data-driven chips rendered from a `CHIP_MODEL` seed through an async `fetchChipGroups()` seam
- Multi-select chips implemented as native `<button>` toggles with `aria-pressed`
- Selection held in a `Set`, with a public `getSelected` / `setSelected` / `clearAll` API on `window.chipSelect`
- Optional maximum-selection cap with a polite `aria-live` note when the limit is reached
- Selections persist to `localStorage` and are restored on load (storage errors are caught)
- Roving-tabindex keyboard navigation — arrow keys, `Home` / `End`, `Enter` / `Space`
- Disabled chips are supported in the model and skipped by keyboard navigation
- Selected chips take an accent-tinted fill with WCAG AA readable accent ink, ease in a check glyph, and animate a scale pop on toggle
- Live "N selected" summary updated via `aria-live` on every change
- GPU-friendly motion — chips animate with `transform` and `opacity` only
- Responsive panel that wraps chips and adapts padding down to 280px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Toggle buttons** — Native `<button>` chips expose state via `aria-pressed`
- **Accessible names** — Every chip and action button has an explicit `aria-label`
- **Group role** — The chip row uses `role="group"` with an `aria-label`
- **Roving tabindex** — One chip is tabbable; arrow keys, `Home`, and `End` move focus within the group
- **Disabled chips** — Disabled options carry the `disabled` attribute and are skipped by keyboard navigation
- **Live summary** — `aria-live="polite"` announces the selected count
- **Max-selection note** — A `role="status"` region politely announces when the selection cap is reached
- **Focus indicators** — `:focus-visible` outline on chips and actions via the focus ring token
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Tab` — Move focus into and out of the chip group
- `Arrow keys` — Move focus between chips within the group
- `Home / End` — Focus the first or last enabled chip
- `Space` — Toggle the focused chip or activate the focused action
- `Enter` — Activate the focused chip or action

## Common questions

**Which frameworks is Chip Select available in?**

Chip Select ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Chip Select checkbox component free?**

Chip Select is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Chip Select support dark mode?**

Yes. Chip Select ships light and dark themes, both drawn from the Orchard design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Chip Select live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/chip-select

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt