# Toggle Documentation A toggle control that allows users to switch between two states. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page ```svelte

{code}

``` ## Structure ```svelte ``` ## Managing Pressed State This section covers how to manage the `pressed` state of the component. ### Two-Way Binding Use `bind:pressed` for simple, automatic state synchronization: ```svelte ``` ### Fully Controlled Use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for complete control over the state's reads and writes. ```svelte ``` ## API Reference ### Toggle.Root The toggle button. | Property | Type | Description | Details | | ------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | `pressed` $bindable | `boolean` | Whether or not the toggle button is pressed.`Default: false` | | | `onPressedChange` | `function` - (pressed: boolean) => void | 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 | `HTMLButtonElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: null` | | | `children` | `Snippet` | The children content to render.`Default: —— undefined` | | | `child` | `Snippet` - type SnippetProps = { props: Record\; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: —— undefined` | | | Data Attribute | Value | Description | Details | | ------------------ | ---------------------- | --------------------------------------------- | ------- | | `data-state` | `enum` - 'on' \| 'off' | 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. | | [Previous Time Range Field](/docs/components/time-range-field) [Next Toggle Group](/docs/components/toggle-group)