# Feature Toggles

> 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.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: toggle, switch, form
- Page: https://builder.atheros.ai/components/feature-toggles
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_feature_toggles/preview-ae32697b701e.webp

## Features

- Bare centered toggle group with a small on-brand title group — no panel card or extra chrome
- Four switch rows (Streaming, Memory, JSON mode, Tool use) built on hidden native checkboxes
- Checked tracks use the design system's authored accent color and on-primary thumb ink, with no glow
- Thumb slides across the track via `transform: translateX` with a springy cubic-bezier
- Clicking either the switch or the text label toggles the row
- Row text brightens from muted to full text color when its switch is on
- `role="switch"` inputs with `aria-checked` kept in sync by JavaScript
- Visually-hidden live region announces "Feature enabled/disabled" to assistive technology
- Visible focus ring wraps the whole row when a switch is keyboard-focused
- Dark and light themes preserve the active design system accent against their respective canvases
- Responsive layout that adapts down to 320px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Switch semantics** — Native checkboxes with `role="switch"` and JS-synced `aria-checked`
- **Switch labels** — Explicit `aria-label` on every input plus two clickable `<label for>` elements per row
- **Group semantics** — `role="group"` with `aria-label="Feature toggles"` wraps the rows
- **Live readout** — Visually-hidden `role="status"` with `aria-live="polite"` announces "Feature enabled/disabled"
- **Keyboard toggling** — Space toggles the focused switch natively
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS, Enter/Space activation
- **Focus indicators** — A visible ring wraps the whole row via `:has(.ftg-input:focus-visible)`, plus the global `:focus-visible` ring
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions

## Keyboard shortcuts

- `Space` — Toggle the focused switch
- `Enter` — Activate the theme toggle
- `Tab` — Move focus between the theme toggle and the switches

## Common questions

**Which frameworks is Feature Toggles available in?**

Feature Toggles 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 Feature Toggles input component free?**

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

**Does Feature Toggles support dark mode?**

Yes. Feature Toggles ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Feature Toggles 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/feature-toggles

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