Checkbox

Checkbox is a component used for allowing a user to make a multiple choice. Broadly used in the forms and surveys.

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Examples

Default Checkbox example.

html

<div class="custom-check">
    <input class="custom-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="custom-check-label" for="defaultCheck1">
      Default checkbox
    </label>
</div>
<div class="custom-check">
    <input class="custom-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
    <label class="custom-check-label" for="defaultCheck2">
        Disabled checkbox
    </label>
</div>

Basic Inline Checkbox

html

<div class="custom-check form-check-inline">
    <input class="custom-check-input" type="checkbox" value="" id="Checkbox1">
    <label class="custom-check-label" for="Checkbox1">
      Checkbox 1
    </label>
</div>
<div class="custom-check form-check-inline">
    <input class="custom-check-input" type="checkbox" value="" id="Checkbox2">
    <label class="custom-check-label" for="Checkbox2">
        Checkbox 2
    </label>
</div>

Different Styling for Checkbox

html

  <div class="custom-check">
      <input class="custom-check-input text-primary bg-warning" type="checkbox" value="" id="Checkbox3">
      <label class="custom-check-label" for="Checkbox3">
        checkbox 3
      </label>
  </div>
  <div class="custom-check">
      <input class="custom-check-input" type="checkbox" value="" id="Checkbox4">
      <label class="custom-check-label" for="Checkbox4">
        checkbox 4
      </label>
  </div>
  <div class="custom-check">
    <input class="custom-check-input border-primary text-primary" type="checkbox" value="" id="Checkbox5">
    <label class="custom-check-label text-primary" for="Checkbox5">
      checkbox 5
    </label>
</div>