Prepared Docs

ThemedSwitch from @prepared911/ui-core wraps Radix RadioGroup to render a sliding-track switch with two or three icon-only options. The primitive handles roving focus, radio semantics, and single-selection enforcement; your job is to label the group and each option.

What the component handles

Group semantics. Root exposes role="radiogroup".
Option semantics. Each hit target exposes role="radio" with aria-checked.
Roving focus. Arrow keys move between options and update selection.
Decorative knob. The sliding knob and morphing icon are aria-hidden; option labels carry the accessible names.
Reduced motion. Icon morph transitions and knob slide animations are disabled when the user prefers reduced motion.
Focus indicator. Keyboard focus renders a high-contrast ring on the sliding knob so it stays visible against every knob theme.
Non-text contrast. The knob uses a solid hairline border so it remains distinguishable from the glass track, including neutral fills.
Forced colors. Under Windows High Contrast / forced-colors: active, the knob keeps a visible border and selected position.

What you must provide

Group label (required). Provide ariaLabel or labelledBy on the root so the purpose of the control is announced. In development, missing names log a [ui-core][ThemedSwitch] console warning.
Option labels. Every option needs a label string because the visible control is icon-only.
Immediate consequence. Selecting an option should update the view without requiring an additional submit step.

Keyboard behavior

Tab moves focus into the group.
Arrow keys move between options and update the selected value.
Space selects the focused option when applicable.

Semantics and roles

role="radiogroup" on the root.
Items expose role="radio" with aria-checked="true" or "false".
Knob visuals are decorative and must not replace option labels.

Target size (WCAG 2.5.8)

Per-option hit targets are compact to match Switch dimensions. At the default Medium size, each lane is roughly 18 CSS pixels tall — below the 24×24 px AA minimum when used as a standalone target.

Prefer Medium or Large for primary, frequently used controls.
Reserve Small for dense toolbars or secondary contexts where surrounding whitespace satisfies the spacing exception (no adjacent targets within a 24 px circle).
If a control must meet 2.5.8 without relying on spacing, consider SegmentedControl with labeled segments instead.

Known caveats

More than three options. Use SegmentedControl or Select.
Plain binary settings. Use Switch.
Color-only meaning. Pair knob themes with distinct icons and labels.

Themed Switch / API and Development

Toggle Group / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Target size (WCAG 2.5.8)

Known caveats

What the component handles

Group semantics. Root exposes role="radiogroup".
Option semantics. Each hit target exposes role="radio" with aria-checked.
Roving focus. Arrow keys move between options and update selection.
Decorative knob. The sliding knob and morphing icon are aria-hidden; option labels carry the accessible names.
Reduced motion. Icon morph transitions and knob slide animations are disabled when the user prefers reduced motion.
Focus indicator. Keyboard focus renders a high-contrast ring on the sliding knob so it stays visible against every knob theme.
Non-text contrast. The knob uses a solid hairline border so it remains distinguishable from the glass track, including neutral fills.
Forced colors. Under Windows High Contrast / forced-colors: active, the knob keeps a visible border and selected position.

What you must provide

Group label (required). Provide ariaLabel or labelledBy on the root so the purpose of the control is announced. In development, missing names log a [ui-core][ThemedSwitch] console warning.
Option labels. Every option needs a label string because the visible control is icon-only.
Immediate consequence. Selecting an option should update the view without requiring an additional submit step.

Keyboard behavior

Tab moves focus into the group.
Arrow keys move between options and update the selected value.
Space selects the focused option when applicable.

Semantics and roles

role="radiogroup" on the root.
Items expose role="radio" with aria-checked="true" or "false".
Knob visuals are decorative and must not replace option labels.

Target size (WCAG 2.5.8)

Prefer Medium or Large for primary, frequently used controls.
Reserve Small for dense toolbars or secondary contexts where surrounding whitespace satisfies the spacing exception (no adjacent targets within a 24 px circle).
If a control must meet 2.5.8 without relying on spacing, consider SegmentedControl with labeled segments instead.