Windy CSS styleguide

3.7 #components.checkbox .checkbox

Custom checkbox with associated text. By default is on.

    <div class="checkbox {{modifier_class}}">This is my custom checkbox</div>

Examples

Default styling

This is my custom checkbox

.checkbox--variant-red

red variant of checkbox (used only on light backgrounds)

This is my custom checkbox

.checkbox--variant-red-light

red light variant of checkbox (used only on light backgrounds)

This is my custom checkbox

.checkbox--variant-orange

orange variant of checkbox (used only on dark backgrounds)

This is my custom checkbox

.checkbox--after

renders checkbox behind the element

This is my custom checkbox

.checkbox--off

Checkbox is off

This is my custom checkbox

Markup

    <div class="rounded-box m-15 bg-white fg-gray">
        <div class="checkbox [modifier class]">This is my custom checkbox</div>
    </div>
    <div class="rounded-box m-15 bg-gray-dark fg-gray-light">
        <div class="checkbox [modifier class]">This is my custom checkbox</div>
    </div>

Source: src/css/components/checkbox.less, line 1