Switch

Usage

import { Switch } from '@epilot/spark-ui/switch'

<Switch defaultChecked />

Examples

With a label

Styles

Set the styleVariant prop to restyle a single switch (solid is the default; an ambient data-style on an ancestor still cascades): solid, soft, and surface. The on track is a strong accent in solid/surface and a lighter accent in soft; the off track stays a neutral grey. surface has a bordered ("recessed") track, a neutral ring most visible in the off state, while solid/soft are borderless.

High contrast

High contrast is an orthogonal modifier for AA+ legibility, set via <Theme highContrast> (or the raw data-high-contrast attribute). The on track deepens to step 12 and the thumb flips to step 1 (opposite ends of the scale), so they contrast maximally in both appearances (light: near-white thumb on a dark track; dark: near-dark thumb on a bright track). surface also keeps its border.

Colors

The switch paints its on track with the accent scale by default. Set the color prop to neutral or danger to re-color a single switch, appearance-correct in both light and dark. Wrapping in <Theme accentColor="…"> still works for arbitrary accent colours outside this fixed set.

Controlled

Disabled

API Reference

Built on Base UI Switch. See the Base UI docs for the full API (checked, onCheckedChange, disabled, …). Spark additions:

• Single size with a 40px hit area; follows the data-radius knob (pill by default, squared at radius="none"), style- and high-contrast-aware.
• styleVariant: 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'. Per-switch style; defaults to solid once color or styleVariant is set.
• color: 'accent' | 'neutral' | 'danger'. Re-points the accent scale for this switch.
• size / variant: deprecated, accepted for back-compat but ignored (one size; use color="danger" for a destructive switch).