Design Guide – v. 7.1.1

Togglebox

moodNewly updated

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.

Togglebox

Toggleboxes have two states: on and off. Each of these have default, hover, focus and disabled states. A togglebox must always be accompanied by a label, on the left side or on the top, that clearly conveys what option a user will turn on or off. If there is a need for a more detailed description, a help icon can be added after the label.
Optionsclose

Label add on

State modifiers

Label position

HTML
1
2
3
4
5
6
<div class="togglebox">
    <input type="checkbox" id="togglebox-example" />
    <label for="togglebox-example">
        Label
    </label>
</div>
When to consider something else
  • 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.
How to use Toggleboxes

Do

Do you have any credit cards

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

Preferences

Don't

Preferences

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

Checked

Use the checked attribute to enable a toggle.

HTML
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>
Disabled

Disable a toggle by adding disabled attribute to the desired toggle.

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