Toggle

Groups multiple toggle controls, allowing users to enable one or multiple options.

	<script lang="ts">
  import { LockKeyOpen } from "phosphor-svelte";
  import { Toggle } from "$lib";
 
  let unlocked = false;
  $: code = unlocked ? "1985" : "••••";
</script>
 
<div
  class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
>
  <div
    class="text-end font-alt text-[19px] tracking-[13.87px] {unlocked
      ? 'text-foreground'
      : 'text-muted-foreground'}"
  >
    {code}
  </div>
  <Toggle.Root
    aria-label="toggle code visibility"
    class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
    bind:pressed={unlocked}
  >
    <LockKeyOpen class="sq-6" />
  </Toggle.Root>
</div>

	<script lang="ts">
  import { LockKeyOpen } from "phosphor-svelte";
  import { Toggle } from "$lib";
 
  let unlocked = false;
  $: code = unlocked ? "1985" : "••••";
</script>
 
<div
  class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
>
  <div
    class="text-end font-alt text-[19px] tracking-[13.87px] {unlocked
      ? 'text-foreground'
      : 'text-muted-foreground'}"
  >
    {code}
  </div>
  <Toggle.Root
    aria-label="toggle code visibility"
    class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
    bind:pressed={unlocked}
  >
    <LockKeyOpen class="sq-6" />
  </Toggle.Root>
</div>

••••

Structure

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

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

Component API

Toggle.Root

The toggle button.

Property	Type	Description
`pressed`	`boolean`	Whether or not the toggle button is pressed. `Default: false`
`onPressedChange`	`function`	A callback function called when the pressed state of the toggle changes. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the switch is disabled. `Default: false`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

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`	Whether the toggle is in the on or off state.
`data-disabled`	`——`	Present when the toggle is disabled.
`data-toggle-root`	`——`	Present on the root element.