Switch Group

Usage

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

function Charging() {
  return (
    <SwitchGroup aria-label="Charging">
      <label className="flex items-center gap-3">
        <Switch defaultChecked />
        <span>Solar charging</span>
      </label>
      <label className="flex items-center gap-3">
        <Switch />
        <span>Cheap-rate charging</span>
      </label>
    </SwitchGroup>
  )
}

SwitchGroup is layout only: it renders role="group" and spaces its children, but holds no value. Each Switch keeps its own boolean, so control each one with its own checked and onCheckedChange. This differs from Checkbox Group, which owns a string[]. Props and slots otherwise mirror Radio's RadioGroup.

Use SwitchGroup for settings that apply as soon as they flip. Use CheckboxGroup when the choices are saved together with a form submit. Use RadioGroup when exactly one option is allowed. See Selection groups.

Examples

List styles

Set listStyle to show the switches as a list of SelectionItem rows with a description under each label. SelectionItem takes the Switch as control.

API Reference

SwitchGroup

All native <div> props, plus:

SelectionItem is documented on Checkbox Group.

Accessibility

• SwitchGroup renders role="group". Inside a FieldSet, the <fieldset> and <legend> name the set; outside one, pass aria-label or aria-labelledby to the group.
• The group has no required or error state of its own, because switches are independent booleans. A FieldSet around it still carries a hint through FieldDescription, and a FieldError in that FieldSet still tints the list and legend.
• SelectionItem names each switch by its label and describes it by its description.
• Keyboard: Tab moves between switches, Space toggles the focused one.
• A switch that applies immediately needs visible feedback that it applied; do not leave the change silent.