Switch v1

Styles for radio-/checkbox-elements

Light variant

Markup Light Variant

<div class="form-group">
    <label class="standard light-variant switch v1">
        <input type="checkbox" checked>
        <strong>
            Switch Label
        </strong>
        <span>
            <span>Off</span>
            <span>On</span>
            <a></a>
        </span>
    </label>
</div>

Examples Light Variant

Standard Light Variant

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Materialized Light Variant

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Appleized Light Variant

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Switch Label Off On

Toggle variant

Note

The toggle-variant supports up to 6 options per group.

Markup Toggle Variant

<div class="form-group">
    <div class="switch v1 toggle-variant standard">
        <input id="hour3" name="radio" type="radio" checked>
        <label for="hour3">Hour</label>
        <input id="day3" name="radio" type="radio">
        <label for="day3">Day</label>
        <input id="week3" name="radio" type="radio">
        <label for="week3">Week</label>
        <input id="month3" name="radio" type="radio">
        <label for="month3">Month</label>
        <input id="year3" name="radio" type="radio">
        <label for="year3">Year</label>
        <input id="decade3" name="radio" type="radio">
        <label for="decade3">Decade</label>
        <a></a>
    </div>
</div>

Example Toggle Variant

Standard Toggle Variant

Hour Day Week Month Year Decade

&.primary:

Hour Day Week Month Year Decade

&.secondary:

Hour Day Week Month Year Decade

&.info:

Hour Day Week Month Year Decade

&.warning:

Hour Day Week Month Year Decade

&.danger:

Hour Day Week Month Year Decade

&.success:

Hour Day Week Month Year Decade

&.dark:

Hour Day Week Month Year Decade

&.light:

Hour Day Week Month Year Decade

&.highlight:

Hour Day Week Month Year Decade

&.royal:

Hour Day Week Month Year Decade

Materialized Toggle Variant

Hour Day Week Month Year Decade

&.primary:

Hour Day Week Month Year Decade

&.secondary:

Hour Day Week Month Year Decade

&.info:

Hour Day Week Month Year Decade

&.warning:

Hour Day Week Month Year Decade

&.danger:

Hour Day Week Month Year Decade

&.success:

Hour Day Week Month Year Decade

&.dark:

Hour Day Week Month Year Decade

&.light:

Hour Day Week Month Year Decade

&.highlight:

Hour Day Week Month Year Decade

&.royal:

Hour Day Week Month Year Decade

Appleized Toggle Variant

Hour Day Week Month Year Decade

&.primary:

Hour Day Week Month Year Decade

&.secondary:

Hour Day Week Month Year Decade

&.info:

Hour Day Week Month Year Decade

&.warning:

Hour Day Week Month Year Decade

&.danger:

Hour Day Week Month Year Decade

&.success:

Hour Day Week Month Year Decade

&.dark:

Hour Day Week Month Year Decade

&.light:

Hour Day Week Month Year Decade

&.highlight:

Hour Day Week Month Year Decade

&.royal:

Hour Day Week Month Year Decade