Toggle

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

••••

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
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.