Switch

A toggle switch for binary on/off states. An alternative to checkboxes when the immediate effect of the change should be visually apparent.

Import

import { ToggleSwitch } from '@proyecto-viviana/solid-spectrum';

A controlled toggle switch.

Off

const [isOn, setIsOn] = createSignal(false);

<ToggleSwitch isSelected={isOn()} onChange={setIsOn} />
<span>{isOn() ? 'On' : 'Off'}</span>

Provide an accessible label for the switch.

Enable notifications

<label class="switch-row">
  <ToggleSwitch isSelected={notifications()} onChange={setNotifications} />
  <span>Enable notifications</span>
</label>

Uncontrolled switch with an initial value.

<ToggleSwitch defaultSelected />

Disabled switches cannot be toggled.

Disabled off

Disabled on

<ToggleSwitch isDisabled />
<ToggleSwitch isDisabled defaultSelected />

Prop	Type	Default	Description
`isSelected`	boolean	—	Controlled on/off state
`defaultSelected`	boolean	—	Uncontrolled initial state
`onChange`	(isSelected: boolean) => void	—	Called when the switch is toggled
`isDisabled`	boolean	`false`	Prevents toggling
`aria-label`	string	—	Accessible label (required if no visible label)
`children`	JSX.Element	—	Optional label content rendered alongside the switch