Bootstrap 5 Checks and radios Radios

Last Updated : 20 Dec, 2022

The Bootstrap 5 radios is a feature provided to the user to choose from a predefined set of options. The input tag and label tags are siblings used together to implement the Radio button. Radio is used to limit the number of choices to only one from a predefined set of alternatives.

Bootstrap 5 Checks and radios Radios:

type=”radio”: This attribute is used to define a radio button.
disabled: The disabled attribute is added to the input tag, the input along with the label will change its style( with a lighter color ) and become disabled. So you cannot select those options.

Syntax:

<input class="form-check-input" type="radio" * >

The ‘*’ can be replaced by checked which selects that option by default, and disabled which makes that option disabled.

Example 1: Default and checked radio buttons are shown in this example. The name in the <input> depicts the whole radio group.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <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.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <title>Checks and radios Radios</title> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Bootstrap 5 Checks and radios Radios 
        </h2> 
    </div> 
    <br><br> 
    <div class="container"> 
        <h6>Select from below languages</h6> 
        <div class="form-check"> 
            <input class="form-check-input" 
                   type="radio" name="gfgRadio"> 
                   C++ 
        </div> 
        <div class="form-check"> 
            <input class="form-check-input" 
                   type="radio" name="gfgRadio" 
                   checked> 
                   Python 
        </div> 
        <div class="form-check"> 
            <input class="form-check-input" 
                   type="radio" name="gfgRadio"> 
                   Java 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: Disabled and checked disabled radio buttons are shown in this example. You cannot select those radio buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <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.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <title>Checks and radios Radios</title> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Bootstrap 5 Checks and radios Radios 
        </h2> 
    </div> 
    <br><br> 
    <div class="container"> 
        <h6>Web Development</h6> 
        <div class="form-check"> 
            <input class="form-check-input" 
                   type="radio" name="gfgDisabled" 
                   disabled> 
                   HTML 
        </div> 
        <div class="form-check"> 
            <input class="form-check-input" 
                   type="radio" name="gfgDisabled" 
                   disabled> 
                   CSS 
        </div> 
        <div class="form-check"> 
            <input class="form-check-input" 
                   type="radio" name="gfgDisabled" 
                   checked disabled> 
                   Javascript 
        </div> 
    </div> 
</body> 
</html>