Radio Button
Use radio component when users can only select one option from a list. Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.
Examples
<div class="container">
<h2 class="text-center">Radio Buttons</h2>
<div class="container text-left bordered">
<div class="form-group">
<h5>Radio Group (Stacked)</h5>
<div class="form-check"> <label class="form-check-label" for="RadioDefault1"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault1">
Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault2"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault2">
Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault3"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault3" checked=""> Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault4"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault4" disabled=""> Radio 4(Disabled Default) <span class="radio-overlay "></span>
</label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault5"> <input class="form-check-input" type="radio" name="RadioDefault" id="RadioDefault5">
Radio 5 <span class="radio-overlay "></span> </label> </div>
</div>
</div>
<div class="container text-left bordered">
<div class="form-group field-has-error">
<h5>Radio Group with error (Stacked)</h5>
<div class="form-check"> <label class="form-check-label" for="RadioDefault11"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault11">
Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault21"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault21">
Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault31"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault31">
Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault41"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault41">
Radio 4(Disabled Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check"> <label class="form-check-label" for="RadioDefault51"> <input class="form-check-input" type="radio" name="RadioDefault5" id="RadioDefault51">
Radio 5 <span class="radio-overlay "></span> </label> </div>
<span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an
error message. </span>
</div>
</div>
<div class="container text-left bordered">
<h5>Radio Group (Inline)</h5>
<div class="form-group">
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault111"> Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault211"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault211"> Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault311"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault311" checked=""> Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault411"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault411" disabled=""> Radio 4(Disabled Default)
<span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault511"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault511"> Radio 5 <span class="radio-overlay ">
</span> </label> </div>
</div>
</div>
<div class="container text-left bordered">
<h5>Radio Group with error (Inline)</h5>
<div class="form-group field-has-error">
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault1111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault1111"> Radio 1 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault2111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault2111"> Radio 2 (Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault3111"> <input class="form-check-input" type="radio" name="RadioDefault11" id="RadioDefault3111"> Radio 3 (Selected) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault4111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault4111"> Radio 4(Disabled Default) <span class="radio-overlay "></span> </label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label" for="RadioDefault5111"> <input class="form-check-input" type="radio" name="RadioDefault1" id="RadioDefault5111"> Radio 5 <span class="radio-overlay "> </span> </label> </div>
<span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an
error message. </span>
</div>
</div>
<div class="container text-left bordered">
<h5>Toggle Group (Inline)</h5>
<div class="form-group">
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-outline-primary active"> <input type="radio" name="options" id="option1" checked=""> Active </label> <label class="btn btn-outline-primary">
<input type="radio" name="options" id="option2"> Radio </label> <label class="btn btn-outline-primary"> <input type="radio" name="options" id="option3">
Radio </label> </div>
</div>
</div>
</div>When to use
Used to select a single state from multiple options.
The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them
Last updated