Chip Select

AI Pass+

checkbox#chip#multi-select

design.md

Preview

AI Assistant

Grab the code for this component with a free account

Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.

Create free account Already have one? Sign in

Code

Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.

Create free account Sign in

Checkbox component

About 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.

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

Customise it with AI

Open Chip Select in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the checkbox is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.

Explore Other Components

View all

Pass+

Classic Checkbox Group

VanillaReact

A minimal animated checkbox group rendered from a data array, with a drawn tick animation and a clean single-column list — fully token-driven and design-system agnostic.

#checkbox#form

Pass+

Checkbox Group

VanillaReact

A Vercel-styled checkbox group with animated checkmarks, an indeterminate parent select-all, per-option hints, and a live selection summary — fully token-driven and design-system agnostic.

#checkbox#indeterminate#form

Pass+

Radio Group

VanillaReact

A token-driven card-style radio group where selecting a card highlights it with a check indicator, built on native radios for inherent arrow-key navigation.

#checkbox#radio#cards

Pass+

Skeleton — Outline

VanillaReact

An outline skeleton loading placeholder — wireframe shapes fill in one after another across an article card while content loads. Token-driven, design-system agnostic, with dark mode and reduced-motion support.

#skeleton#loading#outline

Pass+

Training Status Popover

VanillaReact

A premium model training-status popover: a gradient progress ring with live percentage count-up, a running status badge with pulsing dot, an epoch segment strip with ETA, live loss/accuracy/step metric tiles and pause / view-logs actions, revealed from a trigger with staggered entrance.

#popover#progress#ai

Messaging

VanillaReact

A real-time messaging interface with conversation threads, chat bubbles, typing indicators, and simulated API integration — fully token-driven and design-system agnostic.

#messaging#chat

Ready to build?

300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.

Get Atheros AI Pass Try for Free

Starting at $9.9 per month, billed annually