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

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

Use only the tag <nj-radio></nj-radio> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.

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

  <div class="nj-form-group">
    <nj-radio>
      <div class="nj-radio nj-radio--inline">
        <label>
          <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked>
          Option number 4
        </label>
      </div>
    </nj-radio>
    <nj-radio>
      <div class="nj-radio nj-radio--inline">
        <label>
          <input type="radio" name="optionsRadios1" id="optionsRadios5" value="option2">
          Option number 5
        </label>
      </div>
    </nj-radio>
    <nj-radio>
      <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>
    </nj-radio>
  </div>
</form>