Radio button group

Bootstrap 5 Radio button group component

Responsive radio button group built with Bootstrap 5. Discover intuitive forms and enhance your web design with user-friendly, responsive components.

Basic example

Toggle buttons can be grouped in a button group if needed.

Edit in sandbox 
<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked />
  <label class="btn btn-secondary" for="option1" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" />
  <label class="btn btn-secondary" for="option2" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" />
  <label class="btn btn-secondary" for="option3" data-mdb-ripple-init>Radio</label>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Colors

Use a .btn-* class to change color.

Edit in sandbox 
<div class="btn-group">
  <input type="radio" class="btn-check" name="options1" id="option11" autocomplete="off" checked />
  <label class="btn btn-primary" for="option11" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options1" id="option12" autocomplete="off" />
  <label class="btn btn-primary" for="option12" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options1" id="option13" autocomplete="off" />
  <label class="btn btn-primary" for="option13" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options2" id="option21" autocomplete="off" checked />
  <label class="btn btn-secondary" for="option21" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options2" id="option22" autocomplete="off" />
  <label class="btn btn-secondary" for="option22" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options2" id="option23" autocomplete="off" />
  <label class="btn btn-secondary" for="option23" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options3" id="option31" autocomplete="off" checked />
  <label class="btn btn-success" for="option31" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options3" id="option32" autocomplete="off" />
  <label class="btn btn-success" for="option32" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options3" id="option33" autocomplete="off" />
  <label class="btn btn-success" for="option33" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options4" id="option41" autocomplete="off" checked />
  <label class="btn btn-danger" for="option41" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options4" id="option42" autocomplete="off" />
  <label class="btn btn-danger" for="option42" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options4" id="option43" autocomplete="off" />
  <label class="btn btn-danger" for="option43" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options5" id="option51" autocomplete="off" checked />
  <label class="btn btn-warning" for="option51" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options5" id="option52" autocomplete="off" />
  <label class="btn btn-warning" for="option52" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options5" id="option53" autocomplete="off" />
  <label class="btn btn-warning" for="option53" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options6" id="option61" autocomplete="off" checked />
  <label class="btn btn-info" for="option61" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options6" id="option62" autocomplete="off" />
  <label class="btn btn-info" for="option62" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options6" id="option63" autocomplete="off" />
  <label class="btn btn-info" for="option63" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options7" id="option71" autocomplete="off" checked />
  <label class="btn btn-light" for="option71" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options7" id="option72" autocomplete="off" />
  <label class="btn btn-light" for="option72" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options7" id="option73" autocomplete="off" />
  <label class="btn btn-light" for="option73" data-mdb-ripple-init>Radio</label>
</div>

<div class="btn-group">
  <input type="radio" class="btn-check" name="options8" id="option81" autocomplete="off" checked />
  <label class="btn btn-dark" for="option81" data-mdb-ripple-init>Checked</label>

  <input type="radio" class="btn-check" name="options8" id="option82" autocomplete="off" />
  <label class="btn btn-dark" for="option82" data-mdb-ripple-init>Radio</label>

  <input type="radio" class="btn-check" name="options8" id="option83" autocomplete="off" />
  <label class="btn btn-dark" for="option83" data-mdb-ripple-init>Radio</label>
</div>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });