Switch

A controlled element to represent "on" and "off" states.

<script lang="ts">
	import { Switch } from 'lithesome';
	import { cn } from '$site/index.js';
</script>

<div class="flex items-center gap-4">
	<Switch
		id="switch"
		class={({ checked }) =>
			cn(
				'h-8 w-14 rounded-full px-1 transition-colors',
				checked ? 'bg-black dark:bg-white' : 'bg-neutral-300 dark:bg-neutral-700'
			)}
	>
		{#snippet children({ checked })}
			<span
				class={cn(
					'block size-6 rounded-full bg-white shadow-md transition-transform',
					checked ? 'translate-x-6 dark:bg-black' : ''
				)}
			></span>
		{/snippet}
	</Switch>
	<label for="switch" class="ml-1 cursor-pointer select-none">Email notifications</label>
</div>

Prop	Type	Description
`checked`	`boolean` `Default: false`	Whether or not the switch is checked or not.
`required`	`boolean` `Default: false`	Applies the aria-required attribute.
`disabled`	`boolean` `Default: false`	Disables the switch, disallowing the toggling of states.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLInputElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`checked`	`boolean`	Whether or not the switch is checked or not.

Data attribute	Value	Description
`data-switch`	`''`	The base data attribute, can be used for styling.
`data-state`	`'checked' \| 'unchecked'`	Whether or not the switch is checked or not.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`

Basic Example

<script>
	import { Switch } from 'lithesome';
</script>

<Switch />

Native Input element

Since the <Switch /> component is rendering a button, you cannot use it for native form submissions.

If you want to use a native <input /> checkbox for forms, simply bind the checked from the button to the input.

<script>
	import { Switch } from 'lithesome';

	let checked = $state(false);
</script>

<form action="?/update" method="POST">
	<Switch bind:checked />

	<input type="checkbox" hidden bind:checked />

	<button type="submit">Submit</button>
</form>