Back to components
Toggle
Toggles allow a selection to be turned on or off
Table of Contents
Edit this section, Opens in new windowOverview
Toggles are used for binary actions that occur immediately after the user "flips" the Toggle switch. They are commonly used for "On/Off" situations.
Usage
Toggles
For some actions, either a toggle switch or a check box might work. To decide which control would work better, follow these tips:
- Use a toggle switch for binary settings when changes become effective immediately after the user changes them
- Use checkboxes for optional ("nice to have") items
- Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box
- Use checkboxes when the user can select multiple items that are related to a single setting or feature
Best Practice
Sizing
With given attributes (data-size), you can vary the size of the selection control.