Menu

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.

Checkbox 5

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 
				
// Basic switch button - type checkbox
<div class="switch">
    <input id="option" type="checkbox" name="option">
    <label for="option" calss="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" calss="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 calss="togglemark">
        Checkbox / Radio
    </span>
</label>

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

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