Radio-/Checkbox-Listen

Styles for radio- and checkbox-elements

Note

The checkbox-lists work with radio- as well as with checkbox-elements.

v1

Markup v1

<div class="checkbox-list v1">
    <div>
        <input type="checkbox" id="checkbox-1" value="1">
        <label for="checkbox-1">Checkbox Label</label>
    </div>
    <div>
        ...
    </div>
    ...
</div>

Example v1

Checkbox Label 1

Checkbox Label 2

Checkbox Label 3

Checkbox Label 4

Checkbox Label 5

Checkbox Label 6

Checkbox Label 7

Checkbox Label 8

Checkbox Label 9

Checkbox Label 10

v2

Markup v2

<div class="checkbox-list v2">
    <div>
        <input type="radio" name="radio" id="radio1" />
        <label for="radio1">
            <span class="icon">
                <i aria-hidden="true" class="acms-icon acms-icon-check"></i>
            </span>
            Option 1
        </label>
    </div>
    <div>
        <input type="radio" name="radio" id="radio2" />
        <label for="radio2">
            <span class="icon">
                <i aria-hidden="true" class="acms-icon acms-icon-check"></i>
            </span>
            Option 2
        </label>
    </div>
</div>

Example v2

Option 1

Option 2

Option 3

Option 4

Component-Colors:

Option 5

Option 6

Option 7

Option 8

Option 9

Option 10

rounded-light:

Option 20

rounded:

Option 21

Option 22

pill:

Option 23

Option 24

Option 25