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.

Interactive demo

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