Switch

A toggle switch for binary on/off states.

Anatomy

<script>
  import { Switch } from "@saas-ui/svelte/components/switch";
</script>

<Switch>Enable notifications</Switch>

Examples

Basic Accessibility

Basic switch with default styling.

<Switch>Activate Chakra</Switch>

Colours Accessibility

Use the colour prop to change the colour theme.

<VStack gap={4} align="start">
	{#each colours as colour}
		<HStack gap={6} class="items-center">
			<Text size="xs" class="min-w-[8ch]">{colour}</Text>
			{#each switchVariants as variant}
				<Switch
					{colour}
					{variant}
					aria-label="{colour} {variant} off"
				/>
				<Switch
					{colour}
					{variant}
					checked
					aria-label="{colour} {variant} on"
				/>
			{/each}
		</HStack>
	{/each}
</VStack>

Disabled Accessibility

Use the disabled prop to disable the switch.

<HStack gap={4}>
	<Switch disabled>Disabled Off</Switch>
	<Switch disabled checked>Disabled On</Switch>
</HStack>

Sizes Accessibility

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

<HStack gap={8}>
	{#each switchSizes as size}
		<Switch {size}>{size}</Switch>
	{/each}
</HStack>

Thumb Label Accessibility

Use the thumbLabel prop to display icons or text on the switch thumb (the moving toggle).

<Switch size="lg" thumbLabel={{ on: checkIcon, off: xIcon }}>
	Switch me
</Switch>

Track Label Accessibility

Use the trackLabel prop to display icons or text on the switch track (the background container).

<Switch size="lg" colour="blue" trackLabel={{ on: sunIcon, off: moonIcon }}>
	Dark mode
</Switch>

Variants Accessibility

Use the variant prop to change the visual style.

<HStack gap={8}>
	{#each switchVariants as variant}
		<Switch {variant} checked>{variant}</Switch>
	{/each}
</HStack>

Props

Prop	Type	Default	Description
`size`	`xs \| sm \| md \| lg`	`md`	The size of the switch.
`variant`	`solid \| raised`	`solid`	The visual variant of the switch.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`accent`	The colour palette to use.
`checked`	`boolean`	-	Whether the switch is checked.
`disabled`	`boolean`	-	Whether the switch is disabled.
`class`	`text`	-	CSS class to apply to the component.