Bootstrap - Checkbox and Radios

This chapter will discuss about checkbox and radios utilities provided by Bootstrap. Checkboxes allow you to select one or more alternatives from a list, whereas radio buttons allow you to choose only one.

Approach

  • Bootstrap provides wrapper class .form-check for improved layout and behavior of browser default checkboxes and radios elements. It also allows greater customization and cross browser consistency.

  • .form-check-label class is used to show checkbox labels.

  • .form-check-input class is used for input type checkbox.

  • Structurally, the input and label act as siblings.

Bootstrap's custom icons are used to display checked or indeterminate states.

Checkbox

Checkboxes select one or several options from a list.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck">
      <label class="form-check-label" for="defaultCheck">
       item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
      <label class="form-check-label" for="flexCheckChecked">
        item 2
      </label>
    </div>
  </body>
  </html>

Indeterminate

  • The :indeterminate pseudo class is used to create intermediate state checkboxes.

  • The indeterminate state is set via JavaScript as there is no equivalent HTML attribute available to specify it.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="indeterminateCheckbox" >
      <label class="form-check-label" for="indeterminateCheckbox">
         item 1
      </label>
    </div>

  <script>

      var x = document.getElementById("indeterminateCheckbox").indeterminate = true;;

  </script>
  </body>
  </html>

Disabled checkbox

To indicate disabled state use disabled attribute. This makes the associated <label> lighter color indicating disabled state.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledIndeterminateCheckbox" disabled>
      <label class="form-check-label" for="disabledIndeterminateCheckbox">
         item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled>
      <label class="form-check-label" for="disabledCheckedCheckbox">
         item 2
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
      <label class="form-check-label" for="disabledCheckbox">
       item 3
      </label>
    </div>
  </body>
  <script>
    var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true;
  </script>
  </html>

Radios

Radio button limits the number of choices to only one in a list.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultRadio">
      <label class="form-check-label" for="defaultRadio">
        Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked>
      <label class="form-check-label" for="defaultCheckRadio">
        Item 2
      </label>
    </div>
  </body>
  </html>

Disabled Radio Button

To indicate disabled state use disabled attribute and the associated <label>'s are styled with a lighter color.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledRadio" disabled>
      <label class="form-check-label" for="disabledRadio">
         Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled>
      <label class="form-check-label" for="disabledCheckedRadio">
        Item 2
      </label>
    </div>
  </body>
  </html>

Switches

  • The switch has the custom checkbox markup, to render the toggle use .form-switch class. Use role="switch" to convey the type of control to assistive technologies.

  • The switches supports the disabled attribute. The older assistive technologies just announced it as a normal checkbox as a fallback.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckbox">
      <label class="form-check-label" for="defaultSwitchCheckbox">Wi-fi</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckedCheckbox" checked>
      <label class="form-check-label" for="defaultSwitchCheckedCheckbox">Bluetooth</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckbox" disabled>
      <label class="form-check-label" for="disabledSwitchCheckbox">Whatsapp Notification</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckedCheckbox" checked disabled>
      <label class="form-check-label" for="disabledSwitchCheckedCheckbox">Facebook Notification</label>
    </div>
  </body>
  </html>

Default checkbox and radios (stacked)

The radios and checkboxes can be stacked vertically using the .form-check class.

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="defaultStackedRadio" value="option2">
      <label class="form-check-label" for="defaultStackedRadio">
       English
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled>
      <label class="form-check-label" for="disabledStackedRadio">
        Hindi
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
      <label class="form-check-label" for="defaultCheckbox">
      Marathi
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
      <label class="form-check-label" for="disabledCheckbox">
       Japanes
      </label>
    </div>
  </body>
  </html>

Inline

To put checkboxes and radios next to each other, use the class .form-check-inline with any .form-check.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDeafultRadio" value="option1">
      <label class="form-check-label" for="inlineDeafultRadio">English</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDisabledRadio" value="option3" disabled>
      <label class="form-check-label" for="inlineDisabledRadio">Hindi</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineDeafultCheckbox" value="option1">
      <label class="form-check-label" for="inlineDeafultCheckbox">Marathi</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineDisabledCheckbox" value="option3" disabled>
      <label class="form-check-label" for="inlineDisabledCheckbox">Japanes</label>
    </div>
  </body>
  </html>

Reverse

Place checkboxes, radios and switches on opposite sides using .form-check-reverse modifier class.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-check-reverse">
      <h4>Inline Checkboxes</h4>
      <input class="form-check-input" type="checkbox" value="" id="deafultReverseCheckbox">
      <label class="form-check-label" for="deafultReverseCheckbox">
       English
      </label>
    </div>
    <div class="form-check form-check-reverse">
      <input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled>
      <label class="form-check-label" for="disabledReverseCheckbox">
       Hindi
      </label>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <input class="form-check-input" type="checkbox" id="switchReverseCheckbox">
      <label class="form-check-label" for="switchReverseCheckbox">Wifi</label>
    </div>
    <div class="form-check form-check-reverse">
      <h4>Inline Radios</h4>
      <input class="form-check-input" type="radio" value="" id="deafultReverseRadio">
      <label class="form-check-label" for="deafultReverseRadio">
       Marathi
      </label>
    </div>
    <div class="form-check form-check-reverse">
      <input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled>
      <label class="form-check-label" for="disabledReverseRadio">
        Japanes
      </label>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <input class="form-check-input" type="radio" id="switchReverseRadio">
      <label class="form-check-label" for="switchReverseRadio">Bluetooth</label>
    </div>
  </body>
  </html>

Without Labels

  • Skip the wrapping class .form-check for checkboxes and radio that have no label text.

  • Provide an accessible name for assistive technologies (for instance, using aria-label). For information, refer accessibility section of the Forms overview section.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Checkbox and Radio Buttons</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div>
      <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
      Item 1
    </div>

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

Toggle Buttons

  • Use .btn class on the <label> element rather than .form-check-label to create button-like checkboxes and radio buttons. These toggle buttons may also be placed together in a button group.

  • Use .btn-check class which indicate that the input is of a button-type checkbox.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h5>Checkbox Toggle Buttons</h5>
    <input type="checkbox" class="btn-check" id="defaultToggleChecbox" autocomplete="off">
    <label class="btn btn-primary" for="defaultToggleChecbox">Item 1</label>

    <input type="checkbox" class="btn-check" id="checkedToggleChecbox" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedToggleChecbox">Item 2</label>

    <input type="checkbox" class="btn-check" id="disabledToggleChecbox" autocomplete="off" disabled>
    <label class="btn btn-info" for="disabledToggleChecbox">Item 3</label>

    <h5>Radios Toggle Buttons</h5>
    <input type="radio" class="btn-check"  id="defaultToggleRadio" autocomplete="off">
    <label class="btn btn-primary" for="defaultToggleRadio">Item 1</label>

    <input type="radio" class="btn-check" id="checkedToggleRadio" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedToggleRadio">Item 2</label>

    <input type="radio" class="btn-check" id="disabledToggleRadio" autocomplete="off" disabled>
    <label class="btn btn-info" for="disabledToggleRadio">Item 3</label>
  </body>
  </html>

Outlined Styles

Different variants of .btn are supported, including different outline styles as demonstrated in below example.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radio Buttons</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <input type="checkbox" class="btn-check" id="defualtOutlineCheckbox" autocomplete="off">
    <label class="btn btn-outline-primary" for="defualtOutlineCheckbox">Single toggle</label><br><br>

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

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

    <input type="radio" class="btn-check" name="options-outlined" id="defualtOutlineRadio" autocomplete="off">
    <label class="btn btn-outline-warning" for="defualtOutlineRadio">Danger radio</label>
  </body>
  </html>
Advertisements