Switch

Usage

<script lang="ts">
  import { Switch, SwitchField } from '$lib/components/switch';
  import { Label } from '$lib/components/fieldset';
 
  let emailNotifications = false;
</script>

<SwitchField>
  <Switch id="notifications" bind:checked={emailNotifications} />
  <Label for="notifications">Email Notifications</Label>
</SwitchField>

Properties

The Switch component extends the Bits UI <Switch> component. Find the full list of available properties in the official Bits UI documentation.

Examples

Description

Use the Description component to provide additional information and helpful context about the switch.

Sublabel

Use the Sublabel component to add a secondary label to the switch.

Reversed

Place the Switch last in the SwitchField component to make the switch appear on the right side of the label.

Disabled

Use the disabled property to prevent users from interacting with the switch.