Menu
Bootstrap 5 Checkboxes and Radio buttons
Checkboxes
Checkboxes are used if you want the user to select any number of options from a list of preset options.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Checkboxes</h2>
<p>To style a checkbox, use a container element with a .form-check class, and add .form-check-label to labels, and .form-check-input to the input with type=”checkbox”.</p>
<p>The form below contains three checkboxes. The first option is checked by default, and the last option is disabled:</p>
<form action=”/action_page.php”>
<div>
<input type=”checkbox” id=”check1″ name=”option1″ value=”something” checked>
<label for=”check1″>Option 1</label>
</div>
<div>
<input type=”checkbox” id=”check2″ name=”option2″ value=”something”>
<label for=”check2″>Option 2</label>
</div>
<div>
<input type=”checkbox” disabled>
<label>Option 3</label>
</div>
<button type=”submit”>Submit</button>
</form>
</div>
</body>
</html>
Example Explained
To style checkboxes, use a wrapper element with class="form-check" to ensure proper margins for labels and checkboxes.
Then, add the .form-check-label class to label elements, and .form-check-input to style checkboxes properly inside the .form-check container.
Use the checked attribute if you want the checkbox to be checked by default.
Radio buttons
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Radio buttons</h2>
<p>The form below contains three radio buttons. The first option is checked by default, and the last option is disabled:</p>
<form action=”/action_page.php”>
<div>
<input type=”radio” id=”radio1″ name=”optradio” value=”option1″ checked>
<label for=”radio1″>Option 1</label>
</div>
<div>
<input type=”radio” id=”radio2″ name=”optradio” value=”option2″>
<label for=”radio2″>Option 2</label>
</div>
<div>
<input type=”radio” disabled>
<label>Option 3</label>
</div>
<button type=”submit”>Submit</button>
</form>
</div>
</body>
</html>
Toggle Switches
If you want your checkbox to be styled as a toggle switch, use the .form-switch class together with the .form-check container:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Toggle Switch</h2>
<p>Try to submit the form with and without toggling the switch.</p>
<form action=”/action_page.php”>
<div>
<input type=”checkbox” id=”mySwitch” name=”darkmode” value=”yes” checked>
<label for=”mySwitch”>Dark Mode</label>
</div>
<button type=”submit”>Submit</button>
</form>
</div>
</body>
</html>