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

Options

Switch size

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


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

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.

Example in the top navigation

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

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

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

// Light/Dark mode switch
<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>