Togglebox

The 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.

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

Use 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>