Switch buttons

A switch is a digital ON/OFF toggle for controlling one of two states similar to a physical light switch. Read more about switches in the UX Guidelines.

Use when

  • The user needs to decide between two opposing states (ON/OFF)
  • The state is typically a user preference
  • The selected choice needs to be visually prominent
  • The controlled state is independent of other controls on the same level
  • The effect is immediate when changing state
  • You want it to run on touch screens (too), since checkboxes are typically too small for finger touch area
  • It is for some kind of control panel as opposed to a checkbox which is mainly used for input

Basic example

A switch has the markup of a custom checkbox, but uses the .switch class to render a toggle switch. Switches also support the disabled attribute.


Radio 4 
                

<!-- Basic switch button - type checkbox -->



<div class="switch">
    <input id="option" type="checkbox" name="option">
    <label for="option" class="togglemark">
        Checkbox 1
    </label>
</div>



<!-- Basic switch button - type radio -->



<div class="switch">
    <input id="option_3" type="radio" name="option">
    <label for="option_3" class="togglemark">
        Radio 1
    </label>
</div>



<!-- or alternative html template for switch button -->



<label class="switch" for="option">
    <input id="option" type="checkbox or radio" name="option">
    <span class="togglemark">
        Checkbox / Radio
    </span>
</label>

Options

Switch size

By adding .switch-lg class to the switch wrapper .switch, it will transform the switch into a bigger version.


					


<label class="switch switch-lg" for="option">
    <input id="option" type="checkbox" name="option">
    <span class="togglemark">Checkbox</span>
</label>

Switch with label

The label for the switch is limited to the ON/OFF option, to enabled it You need to add the.switch-label class to the switch wrapper .switch.

Checkbox 3 (disabled)
Checkbox 4 
                


<label class="switch switch-label" for="option">
    <input id="option" type="checkbox" name="option">
    <span class="togglemark">Checkbox</span>
</label>

Label position

You have also the option to align the checkbox/switcher to the right and to have the label on the left. For this simply add .switch-rtl class like in the examples below.

Default size

Large size

With ON/OFF label

                

<!-- Default size checkbox with label left aligned -->



<div class="switch switch-rtl">
    <input id="option" type="checkbox" name="option">
    <label for="option" class="togglemark">
        Checkbox 1
    </label>
</div>



<!-- Large size checkbox with label left aligned -->



<div class="switch switch-lg switch-rtl">
    <input id="option" type="checkbox" name="option">
    <label for="option" class="togglemark">
        Checkbox 2
    </label>
</div>



<!-- Checkbox with ON/OFF and label left aligned -->



<div class="switch switch-label switch-rtl">
    <input id="option" type="checkbox" name="option">
    <label for="option" class="togglemark">
        Checkbox 3
    </label>
</div>

Light/Dark mode switch

The Mode switch/toggle is used to switch between Standard (light) mode and Dark mode. It should be easily accessible via the user profile dropdown in the top menu. Learn more about the recommendations for switching to dark mode in the UX Guidelines.

Check the code from the right section to add this switcher into your app.

                


<label class="switch switch-label light-dark-toggle" for="option">
    <b class="light">Light mode</b>
    <input id="option" type="checkbox" name="option">
    <span class="togglemark">
       <b class="details"></b>
    </span>
    <b class="dark">Dark mode</b>
</label>

Example in the top navigation