Toggle Components
Simple Toggle
Label Position
Inline
By default the label and the switch sit at the two ends of the width, as in a list of settings. With inline, they stay side by side.
All Sizes
All Colors
With Helper Text
Automatically save your work every 5 minutes
Add an extra layer of security to your account
With Error
You must accept cookies to continue
Location access is required for this feature
Disabled
Indeterminate State
Indeterminate state can represent partial or loading states
Controlled Toggle
Current state:OFF
Multiple Toggles (Vertical)
Multiple Toggles (Grid)
Practical Use Cases
Account Settings
Email notifications
Receive updates via email
Dark mode
Use dark theme
Auto-play videos
Videos play automatically
Quick Settings
🌙
Dark Mode
🔔
Notifications
🔊
Sound
✈️
Airplane