Checkboxes

Checkboxes are most commonly used to give users a way to make a range of selections ( one or more). They may also be used as a way to have users indicate they agree to specific terms and services.

Interactive demo

Example

<div class="container max-content-width">
  <h2 class="text-center">Checkbox</h2>
  <div class="container text-start bordered">
    <h5>Checkbox Group (Stacked)</h5>
    <div class="form-group">
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault1">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault1">
          Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault2">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2">
          Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault3">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault3" checked>
          Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault4">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault4" disabled>
          Checkbox 4(Disabled Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault5">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault5">
          Checkbox 5 <span class="checkbox-overlay "></span> </label>
      </div>
    </div>
  </div>
  <div class="container text-start bordered">
    <h5>Checkbox Group (Stacked)</h5>
    <div class="form-group field-has-error">
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault121">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault121">
          Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault222">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault222">
          Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault333">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault333">
          Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault444">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault444">
          Checkbox 4(Disabled Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="CheckboxDefault555">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault555">
          Checkbox 5 <span class="checkbox-overlay "></span> </label>
      </div>
      <span class="message text-danger">Error message</span> </div>
  </div>
  <div class="container text-start bordered">
    <h5>Checkbox Group (Inline)</h5>
    <div class="form-group">
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault21">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault21">
          Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault22">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault22">
          Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault23">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault23" checked>
          Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault24">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault24" disabled>
          Checkbox 4(Disabled Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault25">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault25">
          Checkbox 5 <span class="checkbox-overlay "></span> </label>
      </div>
    </div>
  </div>
  <div class="container text-start bordered">
    <h5>Checkbox Group (Inline)</h5>
    <div class="form-group field-has-error">
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault2111">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2111">
          Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault2211">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2211">
          Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault2311">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2311">
          Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault2411">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2411">
          Checkbox 4(Disabled Default) <span class="checkbox-overlay "></span> </label>
      </div>
      <div class="form-check form-check-inline">
        <label class="form-check-label" for="CheckboxDefault2511">
          <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2511">
          Checkbox 5 <span class="checkbox-overlay "></span> </label>
      </div>
      <span class="message text-danger">Error message</span> </div>
  </div>
  <div class="container text-start bordered">
    <h5>Checkbox (Switches)</h5>
    <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>
  </div>
</div>

When to use

Checkboxes should be used when:

• You want users to select multiple items from a predetermined list of items.

• Your users need to see all available options at once.

• When users need to agree to terms and conditions

Checkboxes should not be used for:

• If user needs to select 1 option from a predetermined list of items, using radio buttons would be more appropriate.