Switch

Label

import { Switch } from '@skeletonlabs/skeleton-react';

export default function Default() {
  return (
    <Switch>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch>
  );
}

Checked Color

Use the Tailwind data attribute syntax to target the active state using data-[state=checked]

Label

import { Switch } from '@skeletonlabs/skeleton-react';

export default function Colors() {
  return (
    <Switch>
      <Switch.Control className="data-[state=checked]:preset-filled-success-500">
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch>
  );
}

List

Option 1

Option 2

Option 3

import { Switch } from '@skeletonlabs/skeleton-react';

export default function List() {
  return (
    <div className="grid gap-2 w-full">
      {['Option 1', 'Option 2', 'Option 3'].map((label, i) => (
        <div key={label}>
          <Switch className="flex justify-between p-2">
            <Switch.Label>{label}</Switch.Label>
            <Switch.Control>
              <Switch.Thumb />
            </Switch.Control>
            <Switch.HiddenInput />
          </Switch>
          {i < 2 && <hr className="hr" />}
        </div>
      ))}
    </div>
  );
}

Icons

Label

import { Switch } from '@skeletonlabs/skeleton-react';
import { MoonIcon, SunIcon } from 'lucide-react';

export default function ThumbIcons() {
  return (
    <Switch>
      <Switch.HiddenInput />
      <Switch.Control>
        <Switch.Thumb>
          <Switch.Context>
            {(switch_) => (switch_.checked ? <SunIcon className="size-3" /> : <MoonIcon className="size-3" />)}
          </Switch.Context>
        </Switch.Thumb>
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
    </Switch>
  );
}

Direction

Label

import { Switch } from '@skeletonlabs/skeleton-react';

export default function Dir() {
  return (
    <Switch dir="rtl">
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch>
  );
}

API Reference

Root

Property	Default	Type
`ids`	-	Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> \| undefined The ids of the elements in the switch. Useful for composition.
`label`	-	string \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`disabled`	-	boolean \| undefined Whether the switch is disabled.
`invalid`	-	boolean \| undefined If `true`, the switch is marked as invalid.
`required`	-	boolean \| undefined If `true`, the switch input is marked as required,
`readOnly`	-	boolean \| undefined Whether the switch is read-only
`onCheckedChange`	-	((details: CheckedChangeDetails) => void) \| undefined Function to call when the switch is clicked.
`checked`	-	boolean \| undefined The controlled checked state of the switch
`defaultChecked`	-	boolean \| undefined The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch.
`name`	-	string \| undefined The name of the input field in a switch (Useful for form submission).
`form`	-	string \| undefined The id of the form that the switch belongs to
`value`	"on"	string \| number \| undefined The value of switch input. Useful for form submission.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	SwitchApi<PropTypes>
`element`	-	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	(switch_: SwitchApi<PropTypes>) => ReactNode

Control

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

Thumb

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

Label

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

HiddenInput

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Checked Color

List

Icons

Direction

API Reference

Root

RootProvider

RootContext

Control

Thumb

Label

HiddenInput