Switch

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

Radix UI Switch

When To Use

Use the Switch component when you need to:

Allow users to toggle a single option on or off
Provide a binary choice with immediate effect
Create an on/off control for settings or features
Enable or disable a functionality
Create a visual toggle that clearly shows the current state

Switches are ideal for settings pages, feature toggles, and anywhere you need to show a clear binary state with immediate visual feedback.

Examples

Basic#

Switch is off

With Label#

Enable notifications

Subscribe to newsletter

Receive weekly updates about new products and features.

Disabled#

Disabled unchecked

Disabled checked

Custom#

Light Mode

Sound

Wi-Fi

Power Saver

Reduces performance to extend battery life

Props

Prop	Type	Default
`onCheckedChange?`	`((checked: boolean) => void)`	-
`required?`	`boolean`	-
`checked?`	`boolean`	-
`asChild?`	`boolean`	-
`value?`	`string \| number \| readonly string[]`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`name?`	`string`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

SwitchThumb

Prop	Type	Default
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

Sonner

A toast notification component that provides unobtrusive feedback.

Table

A responsive table component for displaying tabular data.