Mode Radio
AI Pass+input#radio#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.
Input component
About 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.
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"witharia-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"witharia-live="polite"announces "X mode selected" - Visible labels
- Each radio input is wrapped in a
<label>with its visible text span - Focus indicators
:focus-visibleoutline drawn on the visual dot when the hidden input is focused- Theme toggle
role="switch"witharia-checkedtoggled by JS, Enter/Space activation- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Mode Radio in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the input 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
Feature Toggles
ReactVanilla
A bare token-driven group of four AI feature switches — Streaming, Memory, JSON mode, and Tool use — with design-system accent tracks, sliding thumbs, live screen-reader announcements, and clickable row labels in both light and dark.
#input#toggle#switch
Context Picker
ReactVanilla
A bare token-driven context window size picker — a radiogroup of six options (4K, 16K, 32K, 128K, 256K, 1M tokens) where each option stacks miniature page bars that light up with the brand gradient when selected — themed by the AI Steppers design system in both light and dark.
#input#radio
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
One-Time Code Input
VanillaReact
A one-time code input for sign-ins, 2FA and email verification. Six digit boxes share one real input, a focus ring glides to the next box as you type, the texted code arrives with an Autofill chip, a wrong code shakes and clears, and the right one ripples green box by box.
#input#login#password
Date Picker
ReactVanilla
A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.
#input#keyboard
Model Select
ReactVanilla
A bare token-driven custom select for picking an AI model — a checkbox-toggled dropdown with a gradient-ringed trigger, colored brand dots per model, staggered option reveal, backdrop click-away, and full keyboard support — themed by the AI Steppers design system in both light and dark.
#input#select#dropdown
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
