My Blog

Checkbox and Radios

Written by

saqibkhan

in

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.https://www.tutorialspoint.com/bootstrap/examples/checkbox.php

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked&gt;&lt;label class="form-check-label" for="flexCheckChecked"&gt;
    item 2
  &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;script&gt;


  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.https://www.tutorialspoint.com/bootstrap/examples/checkbox_disabled.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled&gt;&lt;label class="form-check-label" for="disabledCheckedCheckbox"&gt;
     item 2
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled&gt;&lt;label class="form-check-label" for="disabledCheckbox"&gt;
   item 3
  &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;script&gt;
var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true;
  </script></html>





Radios





Radio button limits the number of choices to only one in a list.https://www.tutorialspoint.com/bootstrap/examples/radio.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked&gt;&lt;label class="form-check-label" for="defaultCheckRadio"&gt;
    Item 2
  &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




Disabled Radio Button





To indicate disabled state use disabled attribute and the associated <label>'s are styled with a lighter color.https://www.tutorialspoint.com/bootstrap/examples/radio_disabled.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled&gt;&lt;label class="form-check-label" for="disabledCheckedRadio"&gt;
    Item 2
  &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




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







https://www.tutorialspoint.com/bootstrap/examples/radio_switches.php






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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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.https://www.tutorialspoint.com/bootstrap/examples/radio_checkbox_default_stacked.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled&gt;&lt;label class="form-check-label" for="disabledStackedRadio"&gt;
    Hindi
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="defaultCheckbox"&gt;&lt;label class="form-check-label" for="defaultCheckbox"&gt;
  Marathi
&lt;/div&gt;&lt;div class="form-check"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled&gt;&lt;label class="form-check-label" for="disabledCheckbox"&gt;
   Japanes
  &lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




Inline





To put checkboxes and radios next to each other, use the class .form-check-inline with any .form-check.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radios_inline.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radios_reverse.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-check-reverse"&gt;&lt;input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled&gt;&lt;label class="form-check-label" for="disabledReverseCheckbox"&gt;
   Hindi
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-switch form-check-reverse"&gt;&lt;input class="form-check-input" type="checkbox" id="switchReverseCheckbox"&gt;&lt;label class="form-check-label" for="switchReverseCheckbox"&gt;Wifi&lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-check-reverse"&gt;&lt;h4&gt;Inline Radios&lt;/h4&gt;&lt;input class="form-check-input" type="radio" value="" id="deafultReverseRadio"&gt;&lt;label class="form-check-label" for="deafultReverseRadio"&gt;
   Marathi
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-check-reverse"&gt;&lt;input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled&gt;&lt;label class="form-check-label" for="disabledReverseRadio"&gt;
    Japanes
  &lt;/label&gt;&lt;/div&gt;&lt;div class="form-check form-switch form-check-reverse"&gt;&lt;input class="form-check-input" type="radio" id="switchReverseRadio"&gt;&lt;label class="form-check-label" for="switchReverseRadio"&gt;Bluetooth&lt;/label&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




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







https://www.tutorialspoint.com/bootstrap/examples/checkbox_radio_without_labels.php






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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div><input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">

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




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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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.https://www.tutorialspoint.com/bootstrap/examples/checkbox_radio_outlined_styles.php





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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts