Switch Icon
AI Pass+switch#toggle
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.
Switch component
About Switch Icon
A toggle switch whose sliding thumb cross-fades a check icon when on and an x icon when off, with `role="switch"` semantics and full keyboard support — fully design-system agnostic.
Features
- Sliding thumb driven purely by
transform: translateXfor GPU-friendly motion - Check and x Tabler icons cross-fade via
opacityas the thumb moves - True
role="switch"semantics witharia-checkedsynced on every change - Live Enabled/Disabled state readout via
aria-live - Dark mode inverts the active track to carry the readable primary accent on dark surfaces
- Full keyboard support — Space and Enter activate the focused switch
- Fully respects
prefers-reduced-motion
Accessibility
- Switch role
- The control is a
<button>withrole="switch"andaria-checked - Icon hiding
- Decorative check and x icons are
aria-hidden="true" - Live state
aria-live="polite"announces Enabled/Disabled changes- Keyboard activation
- Space and Enter toggle the focused switch
- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations
Customise it with AI
Open Switch Icon in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the switch 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
Switch Labeled
VanillaReact
A split-flap departure-board settings panel — every labeled switch is a solari cell whose ON and OFF characters drop into place with a flap animation while a machined blank plate slides across on a spring, with `role="switch"` semantics, a live status strip, and full keyboard support.
#switch#toggle
Switch
VanillaReact
An elegant, precision-engineered settings panel with sweep-fill switches, spring-glide thumbs, live status, native button behavior, and contrast-safe design-system adaptation in light and dark themes.
#switch#toggle
Theme Toggle Float
VanillaReact
A levitating theme toggle that bobs above its own shadow and has to land to change: the disc drops onto the shadow, swaps its glyph at impact, and springs back up already changed.
#switch#theme
Theme Toggle Celestial
ReactVanilla
Celestial theme switcher — a porthole onto the sky: the night rises through it as a hard horizon, the sun sets below it and the moon rises out of it with the stars.
#switch#theme
Theme Toggle Orb
ReactVanilla
An eclipse orb: the disc is the celestial body itself — a night face slides across the sun with a hard terminator while night spreads over the page outward from the orb.
#switch#theme
Theme Toggle Terminal
VanillaReact
A terminal-styled theme switch with monospace status copy and persisted light and dark modes.
#switch#theme#terminal
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
