Classic Checkbox Group
AI Pass+checkbox#form
design.md
Preview
1280 px
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.
Code
Grab the code for this component with 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.
Checkbox component
About Classic Checkbox Group
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.
Features
- Checkbox rows generated from a simple data array
- Drawn tick animation revealed on check
- Clean single-column list with generous hit areas
- HTML-escaped labels to guard against markup injection
- Grouped with
role="group"for assistive-technology context
Accessibility
- Grouping
- List uses
role="group"with anaria-label - Labels
- Each native checkbox is wrapped by its
<label>for association - Escaping
- Labels are HTML-escaped via
esc()before injection - Decorative box
- Custom box and tick marked
aria-hidden="true" - Keyboard
- Native checkboxes are focusable and toggle with
Space
Customise it with AI
Open Classic Checkbox Group 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
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
Chip Select
VanillaReact
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.
#checkbox#chip#multi-select
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
Login — Proxima
VanillaReact
A cosmic split-screen login with Proxima Centauri orbital visualization, social sign-in (Google, Apple, Passkey), real-time email and password validation, animated star-field background, and a full HUD status bar — fully token-driven and design-system agnostic.
#login#form#validation
Capability Checks
VanillaReact
A bare token-driven capability checkbox group — three label-wrapped custom checks whose boxes fill with the brand two-color gradient and pop in a springy check mark when selected, announcing a live selected count — themed by the AI Steppers design system in both light and dark.
#input#checkbox#form
Profile Dropdown Menu
ReactVanilla
A profile dropdown led by an identity header for the signed-in account, with quick actions and soft key-chip shortcut hints, a What's new discovery item, a switch-account list of the other accounts with a hover switch arrow, a dark mode toggle row grouped above the error-weighted sign-out action — fully token-driven and design-system agnostic.
#account-switcher#dark-mode#responsive
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
