Switch

Switch

The Switch component allows users to toggle an option between on and off states. It can be used for settings, preferences, and other binary choices.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex items-center gap-2">
      <Switch id="notifications" />
      <Label for="notifications">Enable notifications</Label>
    </div>
  );
}

Examples

Colors

Use the color prop to communicate the semantic meaning or state of the switch.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-2">
        <Switch id="default" color="default" defaultChecked />
        <Label for="default">Default</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="success" color="success" defaultChecked />
        <Label for="success">Success</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="warning" color="warning" defaultChecked />
        <Label for="warning">Warning</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="info" color="info" defaultChecked />
        <Label for="info">Info</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="error" color="error" defaultChecked />
        <Label for="error">Error</Label>
      </div>
    </div>
  );
}

Sizes

Use the size prop to control the size of the switch.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-2">
        <Switch id="small" size="small" />
        <Label for="small">Small</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="medium" size="medium" />
        <Label for="medium">Medium</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="large" size="large" />
        <Label for="large">Large</Label>
      </div>
    </div>
  );
}

Controlled

Use the checked prop to control the current state of the switch. When using a controlled switch, update the value in response to the onChange event.

import { createSignal } from "solid-js";
import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  const [enabled, setEnabled] = createSignal(false);

  return (
    <div class="flex items-center gap-2">
      <Switch
        id="dark-mode"
        checked={enabled()}
        onChange={(_: Event, checked: boolean) => setEnabled(checked)}
      />
      <Label for="dark-mode">
        Dark mode: {enabled() ? "On" : "Off"}
      </Label>
    </div>
  );
}

Default Checked

Use the defaultChecked prop to set the initial state of an uncontrolled switch.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex items-center gap-2">
      <Switch id="auto-save" defaultChecked />
      <Label for="auto-save">Automatically save changes</Label>
    </div>
  );
}

Disabled

Use the disabled prop to prevent users from interacting with the switch.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-2">
        <Switch id="disabled-off" disabled />
        <Label for="disabled-off">Disabled</Label>
      </div>
      <div class="flex items-center gap-2">
        <Switch id="disabled-on" disabled defaultChecked />
        <Label for="disabled-on">Disabled and checked</Label>
      </div>
    </div>
  );
}

Change

Use the onChange prop to respond when the switch state changes.

import { createSignal } from "solid-js";
import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  const [enabled, setEnabled] = createSignal(false);

  return (
    <div class="flex items-center gap-2">
      <Switch
        id="email-alerts"
        onChange={(_:Event, checked:boolean) => setEnabled(checked)}
      />
      <Label for="email-alerts">
        Email alerts: {enabled() ? "On" : "Off"}
      </Label>
    </div>
  );
}

Disable Transition

Use the disableTransition prop to disable the transition animation when the Switch changes between its checked and unchecked states.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex items-center gap-2">
      <Switch id="updates" disableTransition />
      <Label for="updates">Updates</Label>
    </div>
  );
}

Custom Slots

Use slotProps to customize the styles or attributes of the switch base and handle elements.

import Label from "rocksolidjs/Label";
import Switch from "rocksolidjs/Switch";

export default function Example() {
  return (
    <div class="flex items-center gap-3">
      <Switch
        id="custom-switch"
        defaultChecked
        slotProps={{
          base: {
            "aria-label": "Custom switch",
            class: "rounded-md",
          },
          handle: {
            class: "rounded-sm",
          },
        }}
      />
      <Label for="custom-switch">Custom switch</Label>
    </div>
  );
}

The slotProps object supports the following slots:

  • base — Customizes the switch’s base element.
  • handle — Customizes the switch’s handle element.

Accessibility

  • Provide an accessible label that clearly describes what the switch controls.
  • Use a visible <label> when possible, or provide an appropriate aria-label when a visible label is not available.
  • Do not rely on color alone to communicate the switch state.
  • Ensure the switch has sufficient contrast in both checked and unchecked states.
  • Use disabled only when the switch cannot currently be changed.

API

Switch

The Switch component supports controlled and uncontrolled states, semantic colors, multiple sizes, disabled states, change handling, and customization of its base and handle slots.

Prop Type Required Default Description
checked boolean No — Controls whether the switch is checked.
class string No — Custom CSS class applied to the switch.
color "default" | "success" | "warning" | "info" | "error" No "default" Sets the semantic color of the switch.
defaultChecked boolean No false Sets the initial checked state for an uncontrolled switch.
disabled boolean No false Disables the switch and prevents user interaction.
disableTransition boolean No false Disables the transition animation when set to true.
id string No — Sets the id attribute of the switch.
onChange (event: Event, checked: boolean) => void No — Called when the checked state changes. Receives the native event and the new checked state.
size "small" | "medium" | "large" No "medium" Controls the size of the switch.
slotProps { base?: object; handle?: object } No — Provides props for customizing the Switch slots.
  • base — Props for the base slot.
  • handle — Props for the handle slot.
  • Checkbox — Use Checkbox when users can select one or more options from a group.