8.0k New

Switch

Previous Next

A control that allows the user to toggle between checked and not checked.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor 
<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 

pnpm dlx shadcn-svelte@latest add switch

Usage 

<script lang="ts">
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
<Switch />

Description

Focus is shared across devices, and turns off when you leave the app.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
 
<Field.Field orientation="horizontal" class="max-w-sm">
  <Field.Content>
    <Field.Label for="switch-focus-mode">Share across devices</Field.Label>
    <Field.Description>
      Focus is shared across devices, and turns off when you leave the app.
    </Field.Description>
  </Field.Content>
  <Switch id="switch-focus-mode" />
</Field.Field>

Choice Card

Card-style selection where Field.Label wraps the entire Field.Field for a clickable card pattern.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
 
<Field.Group class="w-full max-w-sm">
  <Field.Label for="switch-share">
    <Field.Field orientation="horizontal">
      <Field.Content>
        <Field.Title>Share across devices</Field.Title>
        <Field.Description>
          Focus is shared across devices, and turns off when you leave the app.
        </Field.Description>
      </Field.Content>
      <Switch id="switch-share" />
    </Field.Field>
  </Field.Label>
  <Field.Label for="switch-notifications">
    <Field.Field orientation="horizontal">
      <Field.Content>
        <Field.Title>Enable notifications</Field.Title>
        <Field.Description>
          Receive notifications when focus mode is enabled or disabled.
        </Field.Description>
      </Field.Content>
      <Switch id="switch-notifications" checked />
    </Field.Field>
  </Field.Label>
</Field.Group>

Disabled

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field.Field component for styling.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
 
<Field.Field orientation="horizontal" data-disabled class="w-fit">
  <Switch id="switch-disabled-unchecked" disabled />
  <Field.Label for="switch-disabled-unchecked">Disabled</Field.Label>
</Field.Field>

Invalid

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field.Field component for styling.

You must accept the terms and conditions to continue.

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
 
<Field.Field orientation="horizontal" class="max-w-sm" data-invalid>
  <Field.Content>
    <Field.Label for="switch-terms">Accept terms and conditions</Field.Label>
    <Field.Description
      >You must accept the terms and conditions to continue.</Field.Description
    >
  </Field.Content>
  <Switch id="switch-terms" aria-invalid />
</Field.Field>

Size

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

<script lang="ts">
  import * as Field from "$lib/components/ui/field/index.js";
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>
 
<Field.Group class="w-full max-w-[10rem]">
  <Field.Field orientation="horizontal">
    <Switch id="switch-size-sm" size="sm" />
    <Field.Label for="switch-size-sm">Small</Field.Label>
  </Field.Field>
  <Field.Field orientation="horizontal">
    <Switch id="switch-size-default" size="default" />
    <Field.Label for="switch-size-default">Default</Field.Label>
  </Field.Field>
</Field.Group>