Switch
An accessible toggle control built on Radix UI Switch primitive. Available in multiple sizes with smooth sliding animation.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Switch component
Copy this code to create your Switch component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Sizes
Switches are available in three different sizes: large, medium, and small.
Disabled States
Switches can be disabled in both unchecked and checked states.
With Label
Switches can be combined with labels for better accessibility and user experience.
API Reference
The Switch component is built on top of the Radix UI Switch primitive and extends its functionality with additional styling options and features.
Switch.Root
The main switch component that users interact with.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm""md""lg" | "sm" | Controls the size of the switch. |
checked | "boolean" | "undefined" | The controlled checked state of the switch. |
defaultChecked | "boolean" | "false" | The default checked state when initially rendered. |
onCheckedChange | "function" | "undefined" | Event handler called when the checked state changes. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with the switch. |
required | "boolean" | "false" | When true, indicates that the user must check the switch before the form can be submitted. |
className | "string" | "undefined" | Additional CSS classes to apply to the switch. |