No results for " "
Make sure that all words are spelled correctly.
Start typing to search for
Products, orders, customers, actions, etc.
Notifications
Mark All as Read
See all 15 notifications

Checks And Radios

Consistent cross-browser and cross-device checkboxes and radios. Documentation and description for the corresponding controls.
Table of Content

Basic Example #

Example
<div class="row">
    <div class="col">
        <label class="form-check"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Checkbox one</span
            ></label
        ><label class="form-check"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Checkbox two</span
            ></label
        ><label class="form-check"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Checkbox three</span
            ></label
        >
    </div>
    <div class="col">
        <label class="form-check"
            ><input type="radio" class="form-check-input" name="exampleRadio1" /><span
                class="form-check-label"
                >Radio one</span
            ></label
        ><label class="form-check"
            ><input type="radio" class="form-check-input" name="exampleRadio1" /><span
                class="form-check-label"
                >Radio two</span
            ></label
        ><label class="form-check"
            ><input type="radio" class="form-check-input" name="exampleRadio1" /><span
                class="form-check-label"
                >Radio three</span
            ></label
        >
    </div>
    <div class="col">
        <label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Switch one</span
            ></label
        ><label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Switch two</span
            ></label
        ><label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Switch three</span
            ></label
        >
    </div>
</div>

Checkbox States #

A checkbox can be in several different states. Below you can see a demo of these states:

Example
<div class="row">
    <div class="col">
        <label class="form-check"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Normal</span
            ></label
        ><label class="form-check"
            ><input type="checkbox" class="form-check-input sa-indeterminate" /><span
                class="form-check-label"
                >Indeterminate</span
            ></label
        ><label class="form-check"
            ><input type="checkbox" class="form-check-input" checked="" /><span
                class="form-check-label"
                >Checked</span
            ></label
        ><label class="form-check"
            ><input type="checkbox" class="form-check-input is-valid" /><span
                class="form-check-label"
                >Valid</span
            ></label
        >
    </div>
    <div class="col">
        <label class="form-check"
            ><input type="checkbox" class="form-check-input" disabled="" /><span
                class="form-check-label"
                >Normal Disabled</span
            ></label
        ><label class="form-check"
            ><input
                type="checkbox"
                class="form-check-input sa-indeterminate"
                disabled=""
            /><span class="form-check-label">Indeterminate Disabled</span></label
        ><label class="form-check"
            ><input
                type="checkbox"
                class="form-check-input"
                disabled=""
                checked=""
            /><span class="form-check-label">Checked Disabled</span></label
        ><label class="form-check"
            ><input type="checkbox" class="form-check-input is-invalid" /><span
                class="form-check-label"
                >Invalid</span
            ></label
        >
    </div>
</div>

Radio States #

A radio can be in several different states. Below you can see a demo of these states:

Example
<div class="row">
    <div class="col">
        <label class="form-check"
            ><input type="radio" class="form-check-input" name="exampleRadio2" /><span
                class="form-check-label"
                >Normal</span
            ></label
        ><label class="form-check"
            ><input
                type="radio"
                class="form-check-input"
                name="exampleRadio2"
                checked=""
            /><span class="form-check-label">Checked</span></label
        ><label class="form-check"
            ><input
                type="radio"
                class="form-check-input is-valid"
                name="exampleRadio2"
            /><span class="form-check-label">Valid</span></label
        >
    </div>
    <div class="col">
        <label class="form-check"
            ><input type="radio" class="form-check-input" disabled="" /><span
                class="form-check-label"
                >Normal Disabled</span
            ></label
        ><label class="form-check"
            ><input type="radio" class="form-check-input" disabled="" checked="" /><span
                class="form-check-label"
                >Checked Disabled</span
            ></label
        ><label class="form-check"
            ><input
                type="radio"
                class="form-check-input is-invalid"
                name="exampleRadio2"
            /><span class="form-check-label">Invalid</span></label
        >
    </div>
</div>

Switches States #

A switches can be in several different states. Below you can see a demo of these states:

Example
<div class="row">
    <div class="col">
        <label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input" /><span
                class="form-check-label"
                >Normal</span
            ></label
        ><label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input" checked="" /><span
                class="form-check-label"
                >Checked</span
            ></label
        ><label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input is-valid" /><span
                class="form-check-label"
                >Valid</span
            ></label
        >
    </div>
    <div class="col">
        <label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input" disabled="" /><span
                class="form-check-label"
                >Normal Disabled</span
            ></label
        ><label class="form-check form-switch"
            ><input
                type="checkbox"
                class="form-check-input"
                disabled=""
                checked=""
            /><span class="form-check-label">Checked Disabled</span></label
        ><label class="form-check form-switch"
            ><input type="checkbox" class="form-check-input is-invalid" /><span
                class="form-check-label"
                >Invalid</span
            ></label
        >
    </div>
</div>

Inline #

Group checkboxes or radios on the same horizontal row by adding .custom-control-inline to any .custom-radio or .custom-checkbox or .custom-switch .

Example
<div>
    <label class="form-check form-check-inline"
        ><input type="checkbox" class="form-check-input" /><span class="form-check-label"
            >1</span
        ></label
    ><label class="form-check form-check-inline"
        ><input type="checkbox" class="form-check-input" /><span class="form-check-label"
            >2</span
        ></label
    ><label class="form-check form-check-inline"
        ><input type="checkbox" class="form-check-input" disabled="" /><span
            class="form-check-label"
            >3 (disabled)</span
        ></label
    >
</div>
<div class="mt-2">
    <label class="form-check form-check-inline"
        ><input type="radio" class="form-check-input" name="exampleRadio3" /><span
            class="form-check-label"
            >1</span
        ></label
    ><label class="form-check form-check-inline"
        ><input type="radio" class="form-check-input" name="exampleRadio3" /><span
            class="form-check-label"
            >2</span
        ></label
    ><label class="form-check form-check-inline"
        ><input
            type="radio"
            class="form-check-input"
            name="exampleRadio3"
            disabled=""
        /><span class="form-check-label">3 (disabled)</span></label
    >
</div>
<div class="mt-2">
    <label class="form-check form-switch form-check-inline"
        ><input type="checkbox" class="form-check-input" /><span class="form-check-label"
            >1</span
        ></label
    ><label class="form-check form-switch form-check-inline"
        ><input type="checkbox" class="form-check-input" /><span class="form-check-label"
            >2</span
        ></label
    ><label class="form-check form-switch form-check-inline"
        ><input type="checkbox" class="form-check-input" disabled="" /><span
            class="form-check-label"
            >3 (disabled)</span
        ></label
    >
</div>

Without labels #

Omit the wrapping .form-check for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label ).

Example
<div><input type="checkbox" class="form-check-input" aria-label="..." /></div>
<div class="mt-2"><input type="radio" class="form-check-input" aria-label="..." /></div>
<div class="mt-2">
    <input
        type="checkbox"
        class="form-check-input form-switch-without-label"
        aria-label="..."
    />
</div>
Stroyka Admin — eCommerce Dashboard Template © 2021
Powered by HTML — Design by Kos