Custom Radio & Checkbox

Description here

Usage & Examples:

Radio Example:

<!-- Radio -->
<input class="j-radio" type="radio" name="name">

<!-- radio + label -->
<label class="j-radio-label">
    <input type="radio" name="radio1" id="radio1"> Label + Radio
</label>

<!-- Radio Group -->
<div class="j-radio-group">
    <label>
        <input type="radio" name="radio1" id="radio1"> Group + Label + Radio
    </label>
    <label>
        <input type="radio" name="radio1" id="radio2"> Group + Label + Radio
    </label>
</div>

Checkbox Example

<!-- Checkbox -->
<input class="j-checkbox" type="checkbox" name="name">

<!-- Checkbox + label -->
<label class="j-checkbox-label">
    <input type="checkbox" name="check1" id="check2"> Label + Checkbox
</label>

<!-- Checkbox Group -->
<div class="j-checkbox-group">
    <label>
        <input type="checkbox" name="checkbox1" id="checkbox1"> Group + Label + checkbox
    </label>
    <label>
        <input type="checkbox" name="checkbox2" id="checkbox2"> Group + Label + checkbox
    </label>
</div>

Last updated

Was this helpful?