Design documented
The component is fully documented
React documented
Flutter documented
Design
Is the design finished and component available in Figma library?
Up to date
React
Is new design vision part implemented using new tokens?
Up to date
Flutter
Is new design vision part implemented using new tokens?
Up to date
Introduction
The toggle component serves as a visual representation of a binary choice, providing users with a clear way to control settings, preferences, or switch between different views. With its ability to instantly communicate changes and offer immediate feedback, the switch component greatly enhances usability and interactivity.
When to use
Forms
Can be used in tiles, data tables, modals, side panels, and in full page forms.
Settings
Used to change from one setting to another in a menu, page, or component. It often acts as an on/off toggle.
Related components
The difference between a toggle and a Checkbox is that a switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, and work in conjunction with submitting.