Component

Switch is used to toggle between two states on and off. It is commonly used in settings panel, forms and any other place where a user needs to enable or disable feature.

View component changelog
preview
React
"use client";

import Switch from "@radui/ui/Switch";

export default function SwitchExample() {
    return <Switch.Root aria-label="Airplane mode">
        <Switch.Thumb />
    </Switch.Root>;
}

Root component for the Switch component.

PropTypeDefault
children
React.ReactNode
null
customRootClass
string
''
color
string
''
variant
string
--
size
string
--
defaultChecked
boolean
false
checked
boolean
--
onCheckedChange
function
--
disabled
boolean
false
required
boolean
false
name
string
--
value
string
--
asChild
boolean
false

Thumb component for the Switch component.

PropTypeDefault
asChild
boolean
false
className
string
--
children
ReactNode
--
ShortcutDescription
Tab

Moves focus to the switch.

Space

Toggles the checked state.

Enter

Toggles the checked state.

ReferenceWhat Rad UI follows
Switch pattern

Uses switch semantics with aria-checked to expose the current on or off state.

Edit this page on GitHub →