Switch

A toggle control enabling users to switch between "on" and "off" states.

	<script lang="ts">
  import { Switch, Label } from "$lib";
</script>
 
<div class="flex items-center space-x-3">
  <Switch.Root
    id="marketing"
    class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
  >
    <Switch.Thumb
      class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
    />
  </Switch.Root>
  <Label.Root for="marketing" class="text-sm font-medium"
    >Do not disturb</Label.Root
  >
</div>

	<script lang="ts">
  import { Switch, Label } from "$lib";
</script>
 
<div class="flex items-center space-x-3">
  <Switch.Root
    id="marketing"
    class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
  >
    <Switch.Thumb
      class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
    />
  </Switch.Root>
  <Label.Root for="marketing" class="text-sm font-medium"
    >Do not disturb</Label.Root
  >
</div>

Do not disturb

Structure

	<script lang="ts">
  import { Switch } from "bits-ui";
</script>
 
<Switch.Root>
  <Switch.Thumb />
  <Switch.Input />
</Switch.Root>

	<script lang="ts">
  import { Switch } from "bits-ui";
</script>
 
<Switch.Root>
  <Switch.Thumb />
  <Switch.Input />
</Switch.Root>

Component API

Switch.Root

The root switch component used to set and manage the state of the switch.

Property	Type	Description
`checked`	`boolean`	Whether or not the switch is checked. `Default: false`
`onCheckedChange`	`function`	A callback function called when the checked state of the switch changes. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the switch is disabled. `Default: false`
`includeInput`	`boolean`	Whether or not to include the input element in the switch. This will automatically add a hidden input element to the switch that will be checked when the switch is checked. `Default: false`
`inputAttrs`	`object`	Attributes to be spread onto the hidden input element. `Default: —— undefined`
`name`	`string`	The name of the hidden input element, used to identify the input in form submissions. `Default: —— undefined`
`required`	`boolean`	Whether or not the switch is required to be checked. `Default: false`
`value`	`string`	The value of the hidden input element to be used in form submissions when the switch is checked. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The switch's checked state.
`data-checked`	`——`	Present when the switch is checked.
`data-disabled`	`——`	Present when the switch is disabled.
`data-switch-root`	`——`	Present on the root element.

Switch.Thumb

The thumb on the switch used to indicate the switch's state.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.
`checked`	`boolean`	Whether or not the switch is checked.

Data Attribute	Value	Description
`data-state`	`enum`	The switch's checked state.
`data-checked`	`——`	Present when the switch is checked.
`data-switch-thumb`	`——`	Present on the thumb element.

🚧 UNDER CONSTRUCTION 🚧