Switch

A control element that allows for a binary selection.

Anatomy

To set up the switch correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Design impact on the asChild property

The Switch.Root element of the switch is a label element. This is because the switch is a form control and should be associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility structure will be invalid.

If you need to use the asChild property, make sure that the label element is the direct child of the Switch.Root component.

Examples

Learn how to use the Switch component in your project. Let’s take a look at the most basic example:

Controlled Switch

For a controlled Switch component, the state of the toggle is managed using the checked prop, and updates when the onCheckedChange event handler is called:

Render Prop Usage

The Switch component also allows for a render prop, granting direct access to its internal state. This enables you to dynamically adjust and customize aspects of the component based on its current state:

API Reference

Root

PropTypeDefault
asChild
boolean
checked
boolean
defaultChecked
boolean
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
form
string
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string input: string control: string label: string thumb: string }>
invalid
boolean
label
string
name
string
onCheckedChange
(details: CheckedChangeDetails) => void
required
boolean
value
string | number"on"

Label

PropTypeDefault
asChild
boolean

Thumb

PropTypeDefault
asChild
boolean

Control

PropTypeDefault
asChild
boolean

Previous

Splitter

Next

Tabs