Report an issue

Switch

A toggle control enabling users to switch between "on" and "off" states.

Structure

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

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

Component API

Switch.Root

The root switch component used to set and manage the state of the switch.

Property Type Description
checked
boolean

Whether or not the switch is checked.

Default: false
onCheckedChange
function

A callback function called when the checked state of the switch changes.

Default:  —— undefined
disabled
boolean

Whether or not the switch is disabled.

Default: false
includeInput
boolean

Whether or not to include the input element in the switch. This will automatically add a hidden input element to the switch that will be checked when the switch is checked.

Default: false
inputAttrs
object

Attributes to be spread onto the hidden input element.

Default:  —— undefined
name
string

The name of the hidden input element, used to identify the input in form submissions.

Default:  —— undefined
required
boolean

Whether or not the switch is required to be checked.

Default: false
value
string

The value of the hidden input element to be used in form submissions when the switch is checked.

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

The switch's checked state.

data-checked
——

Present when the switch is checked.

data-disabled
——

Present when the switch is disabled.

data-switch-root
——

Present on the root element.

Switch.Thumb

The thumb on the switch used to indicate the switch's state.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default:  —— undefined
Slot Property Type Description
attrs
object

Additional attributes to apply to the element if using the asChild prop with delegation.
checked
boolean

Whether or not the switch is checked.
Data Attribute Value Description
data-state
enum

The switch's checked state.

data-checked
——

Present when the switch is checked.

data-switch-thumb
——

Present on the thumb element.