Version 3.0.6

Switches

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

Our default switch does not include an inline label and can thus easily support different meanings (e.g.on/off, show/hide, active/inactive, etc.). The meaning of the switch will be inferred from the text in your traditional label. The minimal class will ensure there is no text within the switch.

                      
<ul class="switch-list">
<li class="switch-unit">
<input id="switch-1" class="switch minimal" type="checkbox" checked />
<label for="switch-1" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-2" class="switch minimal" type="checkbox" />
<label for="switch-2" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-3" class="switch minimal" type="checkbox" checked disabled />
<label for="switch-3" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-4" class="switch minimal" type="checkbox=" disabled />
<label for="switch-4" class="switch-label">Switch Label</label>
</li>
</ul>

In cases where the switch purpose may not be clear, we support a label within the switch to indentify the switch's current state.

                      
<ul class="switch-list">
<li class="switch-unit">
<input id="switch-5" class="switch" type="checkbox" checked />
<label for="switch-5" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-6" class="switch" type="checkbox" />
<label for="switch-6" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-7" class="switch" type="checkbox" checked disabled />
<label for="switch-7" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-8" class="switch" type="checkbox=" disabled />
<label for="switch-8" class="switch-label">Switch Label</label>
</li>
</ul>

This type of switch is only used to show Active/Inactive data status (e.g. Edit (500) Gateway Accounts).

                      
<ul class="switch-list">
<li class="switch-unit">
<input id="switch-9" class="switch status" type="checkbox" checked />
<label for="switch-9" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-10" class="switch status" type="checkbox" />
<label for="switch-10" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-11" class="switch status" type="checkbox" checked disabled />
<label for="switch-11" class="switch-label">Switch Label</label>
</li>
<li class="switch-unit">
<input id="switch-12" class="switch status" type="checkbox=" disabled />
<label for="switch-12" class="switch-label">Switch Label</label>
</li>
</ul>

Search Results

Powered by