Check & Radio

Checks

Preview

Default checkbox

Checked checkbox

HTML

<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>

Indeterminate Checkbox

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

Preview

Indeterminate checkbox

HTML

<div class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    data-indeterminate="true"
    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.

Preview

Disabled checkbox

Disabled checked checkbox

HTML

<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

Preview

Default radio

Default checked radio

HTML

<div class="form-check">
  <input
    class="form-check-input"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault1"
  />
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input
    class="form-check-input"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault2"
    checked
  />
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked 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.

Preview

Disabled radio

Disabled checked radio

HTML

<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>

Form Check Reverse

Use the .form-check-reverse class to reverse the order of labels and associated checkboxes/radios.

Preview

Default checkbox

Default radio

HTML

<div class="form-check form-check-reverse">
  <input
    class="form-check-input"
    type="checkbox"
    value=""
    id="flexCheckDefaultReverse"
  />
  <label class="form-check-label" for="flexCheckDefaultReverse">
    Default checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input
    class="form-check-input"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefaultReverse"
  />
  <label class="form-check-label" for="flexRadioDefaultReverse">
    Default 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.

Preview

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

HTML

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
  <label class="form-check-label" 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" 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" 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" for="flexSwitchCheckCheckedDisabled"
    >Disabled checked switch checkbox input</label
  >
</div>

Inline Checkbox & Radio

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

Preview

3 (disabled)

HTML

<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>
<br />
<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>

Checkbox 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.

Preview

Single toggle Checked Disabled

HTML

<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

Preview

Checked Radio Disabled Radio

HTML

<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.

Preview

Single toggle

Checked

Checked success radio Danger radio

HTML

<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 />
<div class="my-2"></div>
<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 />
<div class="my-2"></div>
<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>

About Privacy Contact