Radio Group
AI Pass+checkbox#radio#cards
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 Radio Group
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.
Features
- Card-style options where the whole card is a hit target via a wrapping
<label> - Native
<input type="radio">group provides inherent roving-focus arrow-key navigation - Selected card highlights its border, background, icon, and a scale-in dot indicator
- Indicator dot animates in with
transformandopacityfor GPU-friendly motion - Responsive panel that adapts padding down to 280px
- Fully respects
prefers-reduced-motion
Accessibility
- Native radios
- Real
<input type="radio">group keeps inherent arrow-key navigation - Paired labels
- Each input is wrapped in a
<label>so the whole card is a hit target - Group role
- The list uses
role="radiogroup"with anaria-label - Focus indicators
:focus-visibleoutline on the card via the focus ring token- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Radio 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
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
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
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
Pricing Cards
VanillaReact
A three-tier Atheros AI Builder pricing showcase with a highlighted "Most Popular" plan, monthly AI-credit badges, gradient gem icons, and a dark/light theme toggle — fully token-driven and design-system agnostic.
#pricing#cards
Pill Pagination
VanillaReact
A pure CSS pills pagination with rounded items, ellipsis windowing for 9 pages, and keyboard navigation — fully token-driven and design-system agnostic.
#cards#navigation#pagination
Timeline Scroll
VanillaReact
A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop.
#card#timeline
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
