Developed by Codescandy

Checks & Switches

Examples and usage guidelines for checkboxes, switches, and custom components for creating a wide variety of checkboxes.

Checkboxes

<div class="form-check">
                              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                              <label class="form-check-label" for="flexCheckDefault">
                                Default checkbox
                              </label>
                            </div>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                              <label class="form-check-label" for="flexCheckChecked">
                                Checked checkbox
                              </label>
                            </div>

Custom checkboxes can also utilize the :indeterminate> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

<div class="form-check">
                              <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                              <label class="form-check-label" for="flexCheckIndeterminate">
                                Indeterminate checkbox
                              </label>
                            </div>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

<div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
                                <label class="form-check-label" for="flexCheckDisabled">
                                  Disabled checkbox
                                </label>
                              </div>
                              <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
                                <label class="form-check-label" for="flexCheckCheckedDisabled">
                                  Disabled checked checkbox
                                </label>
                              </div>

Radios

<div class="form-check">
    <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
    <label class="form-check-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="form-check">
    <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
    <label class="form-check-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

<div class="form-check">
                              <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
                              <label class="form-check-label" for="flexRadioDisabled">
                                Disabled radio
                              </label>
                            </div>
                            <div class="form-check">
                              <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
                              <label class="form-check-label" for="flexRadioCheckedDisabled">
                                Disabled checked radio
                              </label>
                            </div>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                              <label class="form-check-label ms-3" for="flexSwitchCheckDefault">Default switch checkbox input</label>
                            </div>
                            <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
                              <label class="form-check-label ms-3" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
                            </div>
                            <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
                              <label class="form-check-label ms-3" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
                            </div>
                            <div class="form-check form-switch">
                              <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
                              <label class="form-check-label ms-3" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
                            </div>

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

<div class="form-check">
                              <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                              <label class="form-check-label" for="defaultCheck1">
                                Default checkbox
                              </label>
                            </div>
                            <div class="form-check">
                              <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
                              <label class="form-check-label" for="defaultCheck2">
                                Disabled checkbox
                              </label>
                            </div>
<div class="form-check">
                              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                              <label class="form-check-label" for="exampleRadios1">
                                Default radio
                              </label>
                            </div>
                            <div class="form-check">
                              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                              <label class="form-check-label" for="exampleRadios2">
                                Second default radio
                              </label>
                            </div>
                            <div class="form-check">
                              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
                              <label class="form-check-label" for="exampleRadios3">
                                Disabled radio
                              </label>
                            </div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

<div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                              <label class="form-check-label" for="inlineCheckbox1">1</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                              <label class="form-check-label" for="inlineCheckbox2">2</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
                              <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
                            </div>
<div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                              <label class="form-check-label" for="inlineRadio1">1</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                              <label class="form-check-label" for="inlineRadio2">2</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                              <label class="form-check-label" for="inlineRadio3">3 (disabled)</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). See the forms overview accessibility section for details.

<div>
                            <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
                          </div>

                          <div>
                            <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
                          </div>

Toggle buttons

Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements. These toggle buttons can further be grouped in a button group if needed.

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
                            <label class="btn btn-primary" for="btn-check">Single toggle</label>
                            <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
                            <label class="btn btn-primary" for="btn-check-2">Checked</label>
                            <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
                            <label class="btn btn-primary" for="btn-check-3">Disabled</label>

Radio toggle buttons

The best part is that you can make checkboxes look like buttons, using any of the pre-defined colors and styles:

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
                                <label class="btn btn-secondary" for="option1">Checked</label>

                                <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
                                <label class="btn btn-secondary" for="option2">Radio</label>

                                <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
                                <label class="btn btn-secondary" for="option3">Disabled</label>

                                <input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
                                <label class="btn btn-secondary" for="option4">Radio</label>

Outlined styles

Different variants of .btn, such at the various outlined styles, are supported.



<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
                          <label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

                          <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
                          <label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

                          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
                          <label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

                          <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
                          <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>