# Mode Radio

> A bare token-driven response-mode radiogroup — Balanced, Precise, Creative — with gradient-ringed dots that fill with the brand two-color gradient when checked, native arrow-key radio semantics, and a polite live announcement of the chosen mode — themed by the AI Steppers design system.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: radio, form
- Page: https://builder.atheros.ai/components/mode-radio
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_mode_radio/preview-f3fda1934e4c.webp

## Features

- Bare centered radiogroup with a small on-brand title group — no panel card or extra chrome
- Three label-wrapped native radios (Balanced, Precise, Creative) with visually-hidden inputs
- Custom dot swaps its idle border for a gradient-painted ring plus soft glow when checked
- Inner fill pops in with the brand two-color gradient via a springy scale transition
- Hovering a row tints the dot border with the primary brand color
- Checked row label darkens and gains weight to mark the current mode
- Native radio semantics — arrow keys cycle the group, Tab enters and leaves it once
- Visually-hidden live region politely announces the chosen mode to assistive technology
- Dark/light theme toggle that flips the gradient (pink→blue light, violet→teal dark)
- Responsive layout that adapts down to 320px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Radio group semantics** — `role="radiogroup"` with `aria-label="Response mode"` wraps the label-wrapped native radios
- **Native keyboard support** — Hidden `<input type="radio">` elements keep arrow-key cycling and Space selection
- **Live announcement** — Visually-hidden `role="status"` with `aria-live="polite"` announces "X mode selected"
- **Visible labels** — Each radio input is wrapped in a `<label>` with its visible text span
- **Focus indicators** — `:focus-visible` outline drawn on the visual dot when the hidden input is focused
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS, Enter/Space activation
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowDown / ArrowRight` — Select the next mode in the group
- `ArrowUp / ArrowLeft` — Select the previous mode in the group
- `Space` — Select the focused mode
- `Enter` — Activate the theme toggle
- `Tab` — Move focus between the theme toggle and the radiogroup

## Common questions

**Which frameworks is Mode Radio available in?**

Mode Radio 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 Mode Radio input component free?**

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

**Does Mode Radio support dark mode?**

Yes. Mode Radio 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 Mode Radio 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/mode-radio

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