Switch

Name: Rad UI
Author: Rad UI Team

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.

React
"use client";

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

export default function SwitchExample() {
    return <Switch.Root>
        <Switch.Thumb />
    </Switch.Root>;
}

API Documentation

Root

Root component for the Switch component.

Prop	Type	Default
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

Thumb component for the Switch component.

Prop	Type	Default
asChild	boolean	false
className	string	--
children	ReactNode	--