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 max-content-width">
<h2 class="text-center">Radio Buttons</h2>
<div class="container text-start 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-start 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">Error message</span> </div>
</div>
<div class="container text-start 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-start 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">Error message</span> </div>
</div>
<div class="container text-start bordered">
<h5>Toggle Group (Inline)</h5>
<div class="form-group">
<div class="btn-group btn-group-toggle">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Active</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
</div>
</div>
<div class="container text-start bordered">
<h5>Toggle Group with error (Inline)</h5>
<div class="form-group field-has-error">
<div class="btn-group btn-group-toggle">
<input type="radio" class="btn-check" name="btnradio1" id="btnradio1_1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1_1">Active</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio2_1" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2_1">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio1" id="btnradio3_1" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3_1">Radio 3</label>
</div>
<span class="message text-danger">Error message</span> </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