Context Picker
AI Pass+input#radio
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 Context Picker
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.
Features
- Bare centered picker with a small on-brand title group — no panel card or extra chrome
- Six context window options (4K, 16K, 32K, 128K, 256K, 1M tokens) as one native radiogroup
- Each option stacks 1–4 tapered page bars that visualize the window size
- Selecting an option sweeps the brand two-color gradient across its page bars with a springy staggered fill
- Selected option gets a gradient border paint and a soft glow ring; its size label turns gradient
- Hovering an option brightens its page bars with a cascading delay
- A gentle pop animation replays on the page stack whenever the selection changes
- Visually-hidden live region announces the chosen window size to assistive technology
- Native radio semantics — arrow keys move the selection, labels toggle on click
- Dark and light themes flip the gradient (pink→blue light, violet→teal dark)
- Responsive layout that adapts down to 320px
- Fully respects
prefers-reduced-motion
Accessibility
- Radiogroup semantics
role="radiogroup"witharia-label="Context window size"on the picker- Option labels
- Every hidden radio input carries an explicit
aria-label("4K tokens" … "128K tokens") - Live readout
- Visually-hidden
role="status"witharia-live="polite"announces the chosen window size - Decorative bars
- Page-bar stacks are
aria-hidden="true"— size text carries the meaning - Keyboard navigation
- Native radio arrow-key navigation moves the selection within the group
- Focus indicators
:focus-visibleon a hidden radio draws the--ringoutline on its option label- Theme toggle
role="switch"witharia-checkedtoggled by JS, Enter/Space activation- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Context Picker 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
Mode Radio
VanillaReact
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.
#input#radio#form
Spec Sheet
VanillaReact
Machined field specimens on a cool ground: boxed inputs annotated with monospace serials, type tags, and live state ticks, held by a single accent. Leading icons, clear buttons, password reveal, a counted textarea, and live per-field validation announced through aria-live.
#input#validation#password
Tone Pad
VanillaReact
A token-driven 2D tone XY pad — a heatmap-tinted Formal–Casual by Concise–Verbose plane with a springy gradient dot driven by pointer-captured drag and arrow keys, a live tabular readout, crosshair guides, localStorage persistence, and a `getTone`/`setTone` API — themed by AI Steppers.
#input#slider
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
Sharp Select
VanillaReact
Sharp-cornered single, multi and searchable multi-select dropdowns in an IBM Carbon-inspired design system — filled triggers with an underline, square checkboxes, accent selection checkmarks, full keyboard support and a dark stack.
#input#select#multi-select
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
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
