Togglebox
moodNewly updatedThe togglebox is a representation of a physical switch that allows users to toggle between two states, commonly to turn something on/off.
Overview
Toggleboxes are used to enable or disable a mode, feature, or function. Most common toggles are used to switch between on/off in preferences or settings, in forms or for other on/off functionality. Toggles are similar to radio groups in function but optimized for toggling between two states. A togglebox can also be similar to a checkobox with the difference being that a toggle-switch will trigger a state change directly when you toggle it, while a checkbox is generally used for state marking together with a submit action.
1 2 3 4 5 6 | <div class="togglebox"> <input type="checkbox" id="togglebox-example" /> <label for="togglebox-example"> Label </label> </div> |
- Use a Radio Button group if users need to select one item from a list of options.
- Use a Checkbox group if users can select multiple items from a list of options.
Do
Don't
Do you have any credit cards
Instead of using a togglebox for answering yes/no questions it is better to use radio buttons.
Do
Don't
Instead of using a togglebox for actions that won’t happen until a submit button is pressed it is better to use a checkbox.
Do
Don't
Do use toggleboxes for on/off preferences of features or behaviour, don’t use checkboxes.
Content guidelines
- The label should be short and concise, preferably three words or less.
- Label should be written as to describe the on state of the toggle.
- Avoid using negations such as “Notifications Off”, which would mean the user would have to turn the switch on to turn the setting off.
Developer documentation
CheckedUse the checked
attribute to enable a toggle.
1 2 3 4 5 6 | <div class="togglebox label-top"> <input type="checkbox" id="toggle-checked-example" checked> <label for="toggle-checked-example"> Label </label> </div> |
Disable a toggle by adding disabled
attribute to the desired toggle.
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="togglebox"> <input type="checkbox" id="toggle-disabled-example" disabled checked> <label for="toggle-disabled-example"> Label </label> </div> <div class="togglebox"> <input type="checkbox" id="toggle-disabled-example-2" disabled> <label for="toggle-disabled-example-2"> Label </label> </div> |