Capability Checks
AI Pass+input#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.
Input component
About Capability Checks
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.
Features
- Bare centered checkbox group with a small on-brand title group — no panel card or extra chrome
- Three custom capability checkboxes (Tool use, Vision, Code exec) built on native label-wrapped inputs
- Checked boxes fill with the brand two-color gradient via an animated
::beforelayer - Check mark draws in with a springy scale-and-rotate transition and a gentle pop of the box
- Hover paints the box border with the primary color; checked labels darken and gain weight
- Visually-hidden live region announces "N of 3 capabilities enabled" on every change
role="group"with an accessible name wraps the checkbox set- Native keyboard support — Space toggles the focused checkbox
- 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
- Native semantics
- Each capability is a native
<input type="checkbox">wrapped in its<label> - Group semantics
role="group"witharia-label="Capabilities"on the checkbox set- Live readout
- Visually-hidden
role="status"witharia-live="polite"announces "N of 3 capabilities enabled" - Keyboard support
- Space toggles the focused checkbox natively; Tab moves through toggle and checks
- Theme toggle
role="switch"witharia-checkedtoggled by JS, Enter/Space activation- Focus indicators
:focus-visibleoutline drawn on the visual box when its hidden input is focused- Decorative icons
- Check mark SVGs carry
aria-hidden="true" - Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Capability Checks 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
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
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
Temperature Range
VanillaReact
A bare token-driven five-stop temperature slider from 0.0 Precise to 1.0 Creative with a gradient fill, snapping draggable thumb, clickable stops, and a rolling gradient digit readout — themed by the AI Steppers design system in both light and dark.
#input#slider#range
Color Picker
ReactVanilla
An iOS-style color picker with grid, spectrum, and RGB slider tabs, an opacity control, a hex input with alpha, and saved swatches — fully token-driven and design-system agnostic.
#input
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
