Report an issue

Toggle

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

••••
	<script lang="ts">
  import { Toggle } from "bits-ui";
  import LockKeyOpen from "phosphor-svelte/lib/LockKeyOpen";
 
  let unlocked = $state(false);
  const code = $derived(unlocked ? "B1T5" : "••••");
</script>
 
<div
  class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-border bg-background-alt 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 size-10 items-center justify-center rounded-[9px] bg-background-alt transition-all 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="size-6" />
  </Toggle.Root>
</div>

Structure

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

API Reference

Toggle.Root

The toggle button.

Property Type Description
pressed bindable prop
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
ref bindable prop
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
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.