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> with the version 3.1 or higher and only in Angular, React or VueJs frameworks.
If you are using an older version or any JavaScript frameworks, do not use this tag and keep only the HTML inside.

<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>