Bootstrap 5 Checks and radios Switches

Bootstrap5 Checks and radios Switches are used to transform the Checks and Radio Inputs into switches. They are transformed as .form-switch is added to the HTML div containing the input and the label. The prime difference between the checkbox and radio switch is the role attribute which is set to radio or checkbox and a name attribute is added in the case of radio.

Bootstrap5 Checks and radios Switches Class:

• form-switch: The class is used to define the check or radio switch which includes the input and label tags.

Syntax:

<div class="form-check form-switch">
 <input class="form-check-input" 
 type="checkbox/radio"
 role="switch" id="flexSwitchCheck">
 <label class="form-check-label" 
 for="flexSwitchCheck">...</label>
</div>

Note: The syntax is same for transforming both the check and the radio switches just the "type" attribute in the input tag is changed to checkbox and radio respectively. 

Example 1: This code below demonstrates how we can implement the switch as checks and show different toggle states.

Output:

Example 2: This code below demonstrates how we can implement the switch as radios inside cards to choose options and show different toggle states:

Output:

Reference:https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches