Checkboxes and radios

• Checkbox
• Radio
• Reverse

Checkbox

Component c-checkbox is dedicated to common <input type="checkbox"> form HTML input tag:

<!-- Standard input -->
<input type="checkbox" id="foo1">
<label for="foo1">Standard checkbox</label>
<br><br>

<input type="checkbox" id="foo2" class="c-checkbox">
<label for="foo2">Checkbox with component c-checkbox</label>
<br><br>

<input type="checkbox" id="optin" class="c-checkbox">
<label for="optin" class="c-flex m-cross-center m-nowrap m-g16">Checkbox with component c-checkbox and c-flex components involved</label>
<br>

<input type="checkbox" id="optin2" class="c-checkbox">
<label for="optin2" class="c-flex m-cross-center m-nowrap m-g16">Another choice</label>
<br>

<input type="checkbox" id="optin3" class="c-checkbox">
<label for="optin3" class="c-flex m-cross-center m-nowrap m-g16">Yet another choice</label>

<!-- DEMO ONLY -->
<style>
    body {
        padding: 2em
    }
</style>

Radio

Component c-radio is dedicated to common <input type="radio"> form HTML input tag:

<!-- Standard input -->
<input type="radio" name="foo" id="foo1">
<label for="foo1">Standard radio</label>
<br><br>

<input type="radio" name="foo" id="foo2" class="c-radio">
<label for="foo2">Radio with component c-radio</label>
<br><br>

<input type="radio" name="foo" id="optin" class="c-radio">
<label for="optin" class="c-flex m-cross-center m-nowrap m-g16">
    Radio with component c-radio and c-flex components involved
</label>
<br>

<input type="radio" name="foo" id="optin2" class="c-radio">
<label for="optin2" class="c-flex m-cross-center m-nowrap m-g16">
    Another choice
</label>
<br>

<input type="radio" name="foo" id="optin3" class="c-radio">
<label for="optin3" class="c-flex m-cross-center m-nowrap m-g16">
    Yet another choice
</label>

<!-- DEMO ONLY -->
<style>
    body {
        padding: 2em
    }
</style>

Reverse

With flex component it is possible to reverse position of the checkbox or radio button.

<!-- Standard input -->
<input type="checkbox" id="optin" class="c-checkbox">
<label for="optin" class="c-flex m-main-end m-row-reverse m-cross-center m-nowrap m-g16">
    Checkbox 1
</label>
<br>

<input type="checkbox" id="optin2" class="c-checkbox">
<label for="optin2" class="c-flex m-main-end m-row-reverse m-cross-center m-nowrap m-g16">
    Checkbox 2
</label>
<br>

<input type="checkbox" id="optin3" class="c-checkbox">
<label for="optin3" class="c-flex m-main-end m-row-reverse m-cross-center m-nowrap m-g16">
    Checkbox 3
</label>
<br>

<input type="radio" name="foo" id="r_optin" class="c-radio">
<label for="r_optin" class="c-flex m-main-end m-row-reverse m-cross-center m-nowrap m-g16">
    Radio 1
</label>
<br>

<input type="radio" name="foo" id="r_optin2" class="c-radio">
<label for="r_optin2" class="c-flex m-main-end m-row-reverse m-cross-center m-nowrap m-g16">
    Radio 2
</label>
<br>

<input type="radio" name="foo" id="r_optin3" class="c-radio">
<label for="r_optin3" class="c-flex m-main-end m-row-reverse m-cross-center m-nowrap m-g16">
    Radio 3
</label>

<!-- DEMO ONLY -->
<style>
    body {
        padding: 2em
    }
</style>