Switch · Skeleton

Label

tsx

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>
	);
}

Label

svelte

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label>Label</Switch.Label>
	<Switch.HiddenInput />
</Switch>

Color

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

Label

tsx

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

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

svelte

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control class="preset-filled-secondary-50-950 data-[state=checked]:preset-filled-secondary-500">
		<Switch.Thumb />
	</Switch.Control>
	<Switch.HiddenInput />
</Switch>

List

Use the Label component to create a list layout.

Option 1

Option 2

Option 3

tsx

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>
	);
}

Label 1

Label 2

Label 3

svelte

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid gap-2 w-full">
	{#each ['Label 1', 'Label 2', 'Label 3'] as label, i (label)}
		<Switch class="flex justify-between p-2">
			<Switch.Label>{label}</Switch.Label>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.HiddenInput />
		</Switch>
		{#if i < 2}
			<hr class="hr" />
		{/if}
	{/each}
</div>

Icons

Add icons to act as state indicators.

Label

tsx

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>
	);
}

svelte

<script lang="ts">
	import { MoonIcon, SunIcon } from '@lucide/svelte';
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control>
		<Switch.Thumb>
			<Switch.Context>
				{#snippet children(switch_)}
					{#if switch_().checked}
						<SunIcon class="size-3" />
					{:else}
						<MoonIcon class="size-3" />
					{/if}
				{/snippet}
			</Switch.Context>
		</Switch.Thumb>
	</Switch.Control>
	<Switch.HiddenInput />
</Switch>

Direction

Set the text direction (ltr or rtl) using the dir prop.

Label

tsx

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>
	);
}

Label

svelte

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch dir="rtl">
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label>Label</Switch.Label>
	<Switch.HiddenInput />
</Switch>

Anatomy

Here’s an overview of how the Switch component is structured in code:

tsx

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

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

svelte

<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label />
	<Switch.HiddenInput />
</Switch>

API Reference

Root

txt

cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50 inline-flex gap-2 items-center rounded data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50

Prop	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

Provider

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

Context

Prop	Default	Type
`children`	—	(switch_: SwitchApi<PropTypes>) => ReactNode

Control

txt

preset-filled-surface-200-800 h-6 w-10 p-0.5 rounded-full flex justify-start data-[state=checked]:preset-filled-primary-500

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

Thumb

txt

grid justify-center items-center h-full aspect-square rounded-full bg-surface-50 text-surface-contrast-50 fill-surface-contrast-50 transition-transform duration-100 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4

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

Label

txt

label-text

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

HiddenInput

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

Root

txt

cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50 inline-flex gap-2 items-center rounded data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50

Prop	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`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => SwitchApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => SwitchApi<PropTypes>]>

Control

txt

preset-filled-surface-200-800 h-6 w-10 p-0.5 rounded-full flex justify-start data-[state=checked]:preset-filled-primary-500

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Thumb

txt

grid justify-center items-center h-full aspect-square rounded-full bg-surface-50 text-surface-contrast-50 fill-surface-contrast-50 transition-transform duration-100 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Label

txt

label-text

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

HiddenInput

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself