Report an issue

Toggle

A control element that switches between two states, providing a binary choice.

••••
	<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 />

Pressed State

Bits UI provides flexible options for controlling and synchronizing the Toggle's pressed state.

Two-Way Binding

Use the bind:pressd directive for effortless two-way synchronization between your local state and the Toggle's internal state.

	<script lang="ts">
	import { Toggle } from "bits-ui";
	let isPressed = $state(false);
</script>
 
<button onclick={() => (isPressed = true)}>Toggle Toggle</button>
 
<Toggle.Root bind:pressed={isPressed}>
	<!-- ... -->
</Toggle.Root>

This setup enables toggling the Toggle via the custom button and ensures the local isPressed state updates when the Toggle's internal state updates through any means (e.g., pressing the Toggle).

Change Handler

You can also use the onPressedChange prop to update local state when the Toggle's pressed state changes. This is useful when you don't want two-way binding for one reason or another, or you want to perform additional logic when the Toggle state changes.

	<script lang="ts">
	import { Toggle } from "bits-ui";
	let isPressed = $state(false);
</script>
 
<Toggle.Root
	pressed={isPressed}
	onPressedChange={(pressed) => {
		isPressed = pressed;
		// additional logic here.
	}}
>
	<!-- ... -->
</Toggle.Root>

Controlled

Sometimes, you may want complete control over the Toggle's pressed state, meaning you will be "kept in the loop" and be required to apply the state change yourself. While you'll rarely need this, it's possible to do so by setting the controlledPressed prop to true.

You will then be responsible for updating a local state variable that is passed as the pressed prop to the Toggle.Root component.

	<script lang="ts">
	import { Toggle } from "bits-ui";
 
	let myPressed = $state(false);
</script>
 
<Toggle.Root controlledPressed pressed={myPressed} onPressedChange={(p) => (myPressed = p)}>
	<!-- ... -->
</Toggle.Root>

See the Controlled State documentation for more information about controlled states.

API Reference

Toggle.Root

The toggle button.

Property Type Description
pressed $bindable
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
controlledPressed
boolean

Whether or not the pressed state is controlled or not. If true, the component will not update the pressed state internally, instead it will call onPressedChange when it would have otherwise, and it is up to you to update the pressed prop that is passed to the component.

Default: false
disabled
boolean

Whether or not the switch is disabled.

Default: false
ref $bindable
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.