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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      
       item 1
      
    
    

      
      
        item 2
      
    
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      
         item 1
      
    

  
  
  

Disabled checkbox

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

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

  
  
  
    
    
    
    
    
    
  
  
    

      
      
         item 1
      
    
    

      
      
         item 2
      
    
    

      
      
       item 3
      
    
  
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      
        Item 1
      
    
    

      
      
        Item 2
      
    
  
  

Disabled Radio Button

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

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

  
  
  
    
    
    
    
    
    
  
  
    

      
      
         Item 1
      
    
    

      
      
        Item 2
      
    
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      Wi-fi
    
    

      
      Bluetooth
    
    

      
      Whatsapp Notification
    
    

      
      Facebook Notification
    
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      
       English
      
    
    

      
      
        Hindi
      
    
    

      
      
      Marathi
    
    

      
      
       Japanes
      
    
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      English
    
    

      
      Hindi
    
    

      
      Marathi
    
    

      
      Japanes
    
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
Inline Checkboxes
      
      
       English
      
    
    

      
      
       Hindi
      
    
    

      
      Wifi
    
    

      
Inline Radios
      
      
       Marathi
      
    
    

      
      
        Japanes
      
    
    

      
      Bluetooth
    
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    

      
      Item 1
    

    

      
      Item 2
    
  
  

Toggle Buttons

• Use .btn class on the 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.

  
  
  
    
    
    
    
    
    
  
  
    
Checkbox Toggle Buttons
    
    Item 1

    
    Item 2

    
    Item 3

    
Radios Toggle Buttons
    
    Item 1

    
    Item 2

    
    Item 3
  
  

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.

  
  
  
    
    
    
    
    
    
  
  
    
    Single toggle



    
    Checked



    
    Checked success radio

    
    Danger radio