Radio Button

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

Example

Option number 1

<div class="nj-radio">
    <label>
      <input type="radio" name="optionsRadio" id="optionsRadio1" value="option1">
      Option number 1
    </label>
  </div>

<form>
  <div class="nj-form-group">
      <div class="nj-radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
          Option number 1
        </label>
      </div>   
    
    <div class="nj-radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option number 2
      </label>
    </div>
      
    <div class="nj-radio nj-radio--disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option number 3 disabled
      </label>
    </div>  
  </div>

  <div class="nj-form-group">  
      <div class="nj-radio nj-radio--inline">
        <label>
          <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked>
          Option number 4
        </label>
      </div> 
    
      <div class="nj-radio nj-radio--inline">
        <label>
          <input type="radio" name="optionsRadios1" id="optionsRadios5" value="option2">
          Option number 5
        </label>
      </div>
    
      <div class="nj-radio nj-radio--inline nj-radio--disabled">
        <label>
          <input type="radio" name="optionsRadios1" id="optionsRadios6" value="option3" disabled>
          Option number 6 disabled
        </label>
      </div>
  </div>
</form>