Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Default</h4>
<div>
  <input id="checkDefault1">
  <label>Default checkbox</label>
</div>
<div>
  <input id="checkDefault2">
  <label>Checked checkbox</label>
</div>
<h4 class="h5 text-muted mt-3">Indeterminate</h4>
<div>
  <input id="checkIndeterminate">
  <label>Indeterminate checkbox</label>
  <script>var checkbox = document.getElementById('checkIndeterminate');</script>
</div>
<h4 class="h5 text-muted mt-3">Disabled</h4>
<div>
  <input id="checkDisabled1">
  <label>Disabled default checkbox</label>
</div>
<div>
  <input id="checkDisabled2">
  <label>Disabled checked checkbox</label>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Default</h4>
<div>
  <input name="radioDefault" id="radioDefault1">
  <label>Default radio</label>
</div>
<div>
  <input name="radioDefault" id="radioDefault2">
  <label>Checked radio</label>
</div>
<h4 class="h5 text-muted mt-3">Disabled</h4>
<div>
  <input name="radioDisabled" id="radioDisabled1">
  <label>Disabled default radio</label>
</div>
<div>
  <input name="radioDisabled" id="radioDisabled2">
  <label>Disabled checked radio</label>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Default</h4>
<div>
  <input id="switchDefault1">
  <label>Default switch</label>
</div>
<div>
  <input id="switchDefault2" checked="">
  <label>Checked switch</label>
</div>
<h4 class="h5 text-muted mt-3">Disabled</h4>
<div>
  <input id="switchDisabled1">
  <label>Disabled default switch</label>
</div>
<div>
  <input id="switchDisabled2">
  <label>Disabled checked switch</label>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Check</h4>
<div>
  <input id="checkInline1">
  <label>1</label>
</div>
<div>
  <input id="checkInline2">
  <label>2</label>
</div>
<div>
  <input id="checkInline3">
  <label>3</label>
</div>
<h4 class="h5 text-muted mt-3">Radio</h4>
<div>
  <input name="radioInline" id="radioInline1">
  <label>1</label>
</div>
<div>
  <input name="radioInline" id="radioInline2">
  <label>2</label>
</div>
<div>
  <input name="radioInline" id="radioInline3">
  <label>3</label>
</div>

   Copy to clipboard

   Open in CodePen

<input id="checkNolabel">
<input name="radioNolabel" id="radioNoLabel1">

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Checkbox</h4>
<input id="checkToggleButton1">
<label>Checkbox</label>
<h4 class="h5 text-muted mt-3">Radio</h4>
<div>
  <input name="radioToggleButton" id="radioToggleButton1">
  <label>Radio 1</label>
  <input name="radioToggleButton" id="radioToggleButton2">
  <label>Radio 2</label>
  <input name="radioToggleButton" id="radioToggleButton3">
  <label>Radio 3</label>
</div>
<h4 class="h5 text-muted mt-3">Outlined</h4>
<input id="checkToggleButtonOutlined1">
<label>Checkbox</label>
<br><br>
<div>
  <input name="radioToggleButtonOutlined" id="radioToggleButtonOutlined1">
  <label>Radio 1</label>
  <input name="radioToggleButtonOutlined" id="radioToggleButtonOutlined2">
  <label>Radio 2</label>
  <input name="radioToggleButtonOutlined" id="radioToggleButtonOutlined3">
  <label>Radio 3</label>
</div>