Skip to main content

A labelled switch row that posts true when on.

Notify me when someone mentions me.
A nudge the day before a due date.
Managed by your administrator.

Usage

Example.svelte
<script lang="ts">
	import Switch from "@zedensix/ui/components/switch";

	let mentions = $state(true);
	let reminders = $state(false);
</script>

<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
	<Switch
		label="Mentions"
		name="mentions"
		description="Notify me when someone mentions me."
		bind:checked={mentions}
	/>
	<Switch
		label="Reminders"
		name="reminders"
		description="A nudge the day before a due date."
		bind:checked={reminders}
	/>
	<Switch
		label="Read receipts"
		name="receipts"
		description="Managed by your administrator."
		checked
		disabled
	/>
</div>