Switch

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

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
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Sonner

A toast notification component that provides unobtrusive feedback.

Table

A responsive table component for displaying tabular data.