Switch

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Switch component provides a toggle control for binary choices. Built on Radix UI, it offers accessibility features, keyboard navigation, and smooth animations. Perfect for settings, preferences, feature toggles, and any on/off controls in your application.

Basic Usage

View in Storybook

With Label

Enable notifications

Controlled Switch

Notifications are enabled

Current state: ON

Settings Panel

Preferences

Push Notifications

Receive notifications about updates

Dark Mode

Use dark theme interface

Auto Save

Automatically save your work

Analytics

Help improve our service

Marketing Emails

Receive product updates and offers

Feature Toggles

Feature Flags

Beta Features

Access experimental features

Advanced Mode

Show advanced options and controls

Debug Mode

Enable debugging information

Experimental UI

Try our new interface design

Disabled State

Disabled (Off)

Disabled (On)

These switches are disabled due to insufficient permissions:

Admin Settings

System Configuration

Form Integration

Notification Preferences

Email Notifications

SMS Notifications

Push Notifications

Weekly Digest

Marketing Emails

Properties

Switch

Property	Type	Default	Description
checked	boolean	-	The controlled checked state of the switch.
defaultChecked	boolean	false	The default checked state for uncontrolled usage.
onCheckedChange	(checked: boolean) => void	-	Callback when the checked state changes.
disabled	boolean	false	Whether the switch is disabled.
required	boolean	false	Whether the switch is required for form submission.
name	string	-	The name attribute for form submission.
value	string	"on"	The value attribute for form submission.
id	string	-	The HTML id attribute.
className	string	-	Additional CSS classes for custom styling.

Accessibility

The Switch component includes comprehensive accessibility features:

• Keyboard Navigation - Space and Enter keys to toggle the switch
• Screen Reader Support - Proper ARIA attributes and role announcements
• Focus Management - Clear focus indicators and logical tab order
• Form Integration - Works seamlessly with form validation and submission
• Label Association - Proper label association with switch elements
• State Announcement - Screen readers announce checked/unchecked states

Common Use Cases

The Switch component is perfect for:

• Settings & Preferences - Theme toggles, notification settings, privacy controls
• Feature Toggles - Enable/disable features, beta access, experimental options
• User Permissions - Access controls, role-based permissions, visibility settings
• Application State - Online/offline mode, auto-save, sync settings
• Content Filters - Show/hide content, filter options, display preferences
• System Configuration - Debug mode, maintenance mode, feature flags
• Accessibility Options - High contrast, reduced motion, screen reader mode

Best Practices

1. Clear Labels - Use descriptive labels that clearly explain what the switch controls
2. Immediate Feedback - Provide immediate visual feedback when toggled
3. Consistent Behavior - Ensure switches behave consistently across your application
4. Appropriate Defaults - Choose sensible default states for switches
5. Group Related Switches - Organize related switches together in settings panels
6. Accessibility - Always associate switches with proper labels using htmlFor/id
7. Form Integration - Include switches in form validation and submission logic
8. Visual Hierarchy - Use proper spacing and typography to create clear hierarchy