Switch
A Switch component is a UI element that allows users to toggle between two states, typically representing an on/off or enabled/disabled choice. It is visually represented as a sliding toggle or checkbox and provides immediate feedback when the user interacts with it. Switch components are commonly used for settings, preferences, and feature activations in applications, enhancing user experience by simplifying the selection process.
# Demo
Basic Switch Examples
Simple switches for common use cases with clear labels and intuitive behavior.
Switch Size Variations
Different switch sizes for various UI contexts and design requirements.
Small:
Medium:
Large:
Disabled Switch
Switches in disabled state to show unavailable or restricted options.
Custom Styled Switches
Switches with custom colors and styling to match different themes and contexts.
Primary:
Success:
Warning:
Danger:
Settings Panel Example
A comprehensive settings panel demonstrating multiple switches in a real-world context.
Connectivity
Wi-Fi
Connect to wireless networks
Bluetooth
Connect to nearby devices
Audio & Privacy
Sound Effects
Play system sounds
Privacy Mode
Hide sensitive information
System
Automatic Updates
Install updates automatically
Location Services
Allow location access
Device Sync Settings
Manage synchronization settings across different devices and platforms.
Mobile Sync
Sync with mobile devices
Desktop Sync
Sync with desktop computers
Cloud Backup
Backup data to cloud storage
Switch Best Practices
✅ Do's
- • Use clear, descriptive labels
- • Provide immediate visual feedback
- • Group related switches logically
- • Include helpful descriptions for complex settings
- • Use consistent switch styling throughout your app
- • Consider the default state carefully
- • Make switches accessible with proper ARIA labels
❌ Don'ts
- • Don't use switches for actions (use buttons instead)
- • Don't make switches too small to interact with
- • Don't use ambiguous or confusing labels
- • Don't disable switches without explanation
- • Don't use too many switches in one section
- • Don't forget to handle loading states
- • Don't ignore keyboard navigation
Switch State Summary
Current Switch States
Basic Switches
Dark Mode:Disabled
Notifications:Enabled
Auto Save:Enabled
System Settings
Wi-Fi:Connected
Bluetooth:Off
Privacy Mode:Inactive
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| enabled | boolean | Optional | Whether the switch is enabled. |
| defaultChecked | boolean | Optional | Default checked state. |
| label | React.ReactNode | Optional | Label for the switch. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| switchClassName | string | ' ' | You can customise by passing tailwind classes. |
| onChange | (checked: boolean) => void | Optional | Callback when switch state changes. |
| id | string | Optional | ID for the switch. |
# Tags