Docs
Switch
Switch
A control that allows the user to toggle between checked and not checked.
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
</script>
<div class="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">Airplane Mode</Label>
</div>
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
</script>
<div class="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label for="airplane-mode">Airplane Mode</Label>
</div>
Installation
npx shadcn-svelte@next add switch
Install bits-ui:
npm i bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { Switch } from "$lib/components/ui/switch/index.js";
</script>
<Switch />
Examples
Form
<script lang="ts" module>
import { z } from "zod";
export const formSchema = z.object({
marketing_emails: z.boolean().default(false).optional(),
security_emails: z.boolean().default(true)
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import SuperDebug, {
type Infer,
type SuperValidated,
superForm
} from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters";
import { toast } from "svelte-sonner";
import { browser } from "$app/environment";
import { page } from "$app/stores";
import * as Form from "$lib/components/ui/form/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
let {
form: data = $page.data.switch
}: { form: SuperValidated<Infer<FormSchema>> } = $props();
const form = superForm(data, {
validators: zodClient(formSchema),
onUpdated: ({ form: f }) => {
if (f.valid) {
toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
} else {
toast.error("Please fix the errors in the form.");
}
}
});
const { form: formData, enhance } = form;
</script>
<form method="POST" action="/?/switch" class="w-full space-y-6" use:enhance>
<fieldset>
<legend class="mb-4 text-lg font-medium"> Email Notifications </legend>
<div class="space-y-4">
<Form.Field
{form}
name="marketing_emails"
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<Form.Control>
{#snippet children({ props })}
<div class="space-y-0.5">
<Form.Label>Marketing emails</Form.Label>
<Form.Description>
Receive emails about new products, features, and more.
</Form.Description>
</div>
<Switch {...props} bind:checked={$formData.marketing_emails} />
{/snippet}
</Form.Control>
</Form.Field>
<Form.Field
{form}
name="security_emails"
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<Form.Control>
{#snippet children({ props })}
<div class="space-y-0.5">
<Form.Label>Security emails</Form.Label>
<Form.Description>
Receive emails about your account security.
</Form.Description>
</div>
<Switch
{...props}
aria-readonly
disabled
bind:checked={$formData.security_emails}
/>
{/snippet}
</Form.Control>
</Form.Field>
</div>
</fieldset>
<Form.Button>Submit</Form.Button>
{#if browser}
<SuperDebug data={$formData} />
{/if}
</form>
<script lang="ts" module>
import { z } from "zod";
export const formSchema = z.object({
marketing_emails: z.boolean().default(false).optional(),
security_emails: z.boolean().default(true)
});
export type FormSchema = typeof formSchema;
</script>
<script lang="ts">
import SuperDebug, {
type Infer,
type SuperValidated,
superForm
} from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters";
import { toast } from "svelte-sonner";
import { browser } from "$app/environment";
import { page } from "$app/stores";
import * as Form from "$lib/components/ui/form/index.js";
import { Switch } from "$lib/components/ui/switch/index.js";
let {
form: data = $page.data.switch
}: { form: SuperValidated<Infer<FormSchema>> } = $props();
const form = superForm(data, {
validators: zodClient(formSchema),
onUpdated: ({ form: f }) => {
if (f.valid) {
toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
} else {
toast.error("Please fix the errors in the form.");
}
}
});
const { form: formData, enhance } = form;
</script>
<form method="POST" action="/?/switch" class="w-full space-y-6" use:enhance>
<fieldset>
<legend class="mb-4 text-lg font-medium"> Email Notifications </legend>
<div class="space-y-4">
<Form.Field
{form}
name="marketing_emails"
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<Form.Control>
{#snippet children({ props })}
<div class="space-y-0.5">
<Form.Label>Marketing emails</Form.Label>
<Form.Description>
Receive emails about new products, features, and more.
</Form.Description>
</div>
<Switch {...props} bind:checked={$formData.marketing_emails} />
{/snippet}
</Form.Control>
</Form.Field>
<Form.Field
{form}
name="security_emails"
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<Form.Control>
{#snippet children({ props })}
<div class="space-y-0.5">
<Form.Label>Security emails</Form.Label>
<Form.Description>
Receive emails about your account security.
</Form.Description>
</div>
<Switch
{...props}
aria-readonly
disabled
bind:checked={$formData.security_emails}
/>
{/snippet}
</Form.Control>
</Form.Field>
</div>
</fieldset>
<Form.Button>Submit</Form.Button>
{#if browser}
<SuperDebug data={$formData} />
{/if}
</form>
On This Page