Switch
A control that allows the user to toggle between checked and unchecked.
Last updated: March 8, 2026
This page now includes practical switch patterns for settings, permissions, filtering, status, and theme controls.
Basic Switch
Default, checked, and disabled states at a glance.
Basic Switches
Labeled Switch
Switches with clear labels for settings rows.
Labeled Switches
Description Switch
Switch cards with helper text descriptions.
With Descriptions
Analytics
Track user interactions and behavior
Email digests
Weekly summary of your activity
With Icon Switch
Switch rows paired with icon badges.
With Icons
Compact Switch
Dense switch layout for multi-channel toggles.
Compact Variant
Large Accessible Switch
Larger switch target for accessibility-focused UIs.
Large - Accessibility
Enable voice input
Larger target for better accessibility
Colored Switches
Color-themed checked states.
Color Variants
Disabled State Switch
Visual examples of disabled on/off states.
Disabled States
Disabled (off)
Feature not available
Disabled (on)
Locked by admin
Loading State Switch
Switch interaction with processing state.
Loading State
With Action Switch
Conditional destructive action based on toggle.
With Action
Danger zone
Enable to see destructive options
Toggle Group Switch
Segmented group toggle behavior.
Toggle Group
Settings Panel Switch
Grouped app settings toggles.
Settings Panel
Feature Toggle Switch
Feature flag style switch cards.
Feature Toggles
beta Features
experimental U I
advanced Mode
Active
Accessibility Switch Options
Accessibility preference switches.
Accessibility
Analytics Toggle Switch
Analytics event toggles with state indicators.
Analytics Tracking
Notification Preference Switch
Channel-specific notification toggles.
Notifications
Theme Mode Switch
Light and dark mode toggle UI.
Theme Mode
Permission Switch
Permission grant/revoke controls.
Permissions
Filter Toggle Switch
Filter toggles with active count.
Filters
Status Indicator Switch
Status toggles with colored indicators.