Switch

A control that allows the user to toggle between checked and not checked.

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Install

Import

API

Root

Props Type Default
as
AsTag | Component
button
asChild
boolean
false
checked
boolean
undefined
defaultChecked
boolean
-
disabled
boolean
false
id
string
-
name
string
-
required
boolean
false
value
string
on
Event Type
update:checked
[_checked: boolean]
Data attribute Value
[data-orientation]
'checked' | 'unchecked'
[data-disabled]
Present when disabled

Thumb

Props Type Default
as
AsTag | Component
span
asChild
boolean
false
Data attribute Value
[data-orientation]
'checked' | 'unchecked'
[data-disabled]
Present when disabled