Docs
Switch
Switch
A control that allows the user to toggle between checked and not checked.
Loading...
<script lang="ts">
import { Label } from "$lib/components/ui/label";
import { Switch } from "$lib/components/ui/switch";
</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";
import { Switch } from "$lib/components/ui/switch";
</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@latest add switch
Usage
<script lang="ts">
import { Switch } from "$lib/components/ui/switch";
</script>
<Switch />
Examples
Form
When using the switch component in a form, you'll want to use the <Form.Switch /> component, which is a wrapper around your existing <Switch /> component that makes it seamlessly integrate with forms.
Loading...
<script lang="ts" context="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 { page } from "$app/stores";
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
export let form: SuperValidated<FormSchema> = $page.data.switch;
</script>
<Form.Root
{form}
schema={formSchema}
let:config
method="POST"
action="?/switch"
class="w-full space-y-6"
>
<fieldset>
<legend class="mb-4 text-lg font-medium"> Email Notifications </legend>
<div class="space-y-4">
<Form.Field {config} name="marketing_emails">
<Form.Item
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<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>
<Form.Switch />
</Form.Item>
</Form.Field>
<Form.Field {config} name="security_emails">
<Form.Item
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<div class="space-y-0.5">
<Form.Label>Security emails</Form.Label>
<Form.Description>
Receive emails about your account security.
</Form.Description>
</div>
<Form.Switch aria-readonly disabled />
</Form.Item>
</Form.Field>
</div>
</fieldset>
<Form.Button>Submit</Form.Button>
</Form.Root>
<script lang="ts" context="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 { page } from "$app/stores";
import * as Form from "$lib/components/ui/form";
import type { SuperValidated } from "sveltekit-superforms";
export let form: SuperValidated<FormSchema> = $page.data.switch;
</script>
<Form.Root
{form}
schema={formSchema}
let:config
method="POST"
action="?/switch"
class="w-full space-y-6"
>
<fieldset>
<legend class="mb-4 text-lg font-medium"> Email Notifications </legend>
<div class="space-y-4">
<Form.Field {config} name="marketing_emails">
<Form.Item
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<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>
<Form.Switch />
</Form.Item>
</Form.Field>
<Form.Field {config} name="security_emails">
<Form.Item
class="flex flex-row items-center justify-between rounded-lg border p-4"
>
<div class="space-y-0.5">
<Form.Label>Security emails</Form.Label>
<Form.Description>
Receive emails about your account security.
</Form.Description>
</div>
<Form.Switch aria-readonly disabled />
</Form.Item>
</Form.Field>
</div>
</fieldset>
<Form.Button>Submit</Form.Button>
</Form.Root>
On This Page