Radio Button

Example

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

Disabled

To disable a checkbox, simply add the .nj-radio--disabled modifier to the element and the disabled boolean attribute to the <input>.

You can have disabled checked radio buttons.

<form>
  <div class="nj-form-group nj-radio-group">
    <div class="nj-radio">
      <label>
        <input type="radio" name="disabled" id="optionsRadios4" value="option1">
        Wonderful option
      </label>
    </div>
    <div class="nj-radio nj-radio--disabled">
      <label>
        <input type="radio" name="disabled" id="optionsRadios5" value="option2" disabled>
        Disabled option
      </label>
    </div>
    <div class="nj-radio nj-radio--disabled">
      <label>
        <input type="radio" name="disabled" id="optionsRadios6" value="option3" checked disabled>
        Disabled but checked option
      </label>
    </div>
  </div>
</form>

Inline

Add the .nj-radio-group--row modifier to the .nj-radio-group element

<form>
  <div class="nj-form-group nj-radio-group nj-radio-group--row">
    <div class="nj-radio">
      <label>
        <input type="radio" name="inline" id="optionsRadios7" value="option1" checked>
        Inline option
      </label>
    </div>
    <div class="nj-radio">
      <label>
        <input type="radio" name="inline" id="optionsRadios8" value="option2">
        2nd inline option
      </label>
    </div>
    <div class="nj-radio">
      <label>
        <input type="radio" name="inline" id="optionsRadios9" value="option3">
        Option number 6 disabled
      </label>
    </div>
  </div>
</form>

Error

HTML5 Native Form validation is taken into account with the required attribute.

<form>
  <div class="nj-form-group nj-radio-group nj-radio-group--row">
    <div class="nj-radio">
      <label>
        <input type="radio" name="error" id="optionsRadios10" value="option1" required>
        Required option
      </label>
    </div>
    <div class="nj-radio">
      <label>
        <input type="radio" name="error" id="optionsRadios11" value="option2" required>
        Required option
      </label>
    </div>
  </div>
</form>

You can also force error style with the .has-danger class on the nj-form-group element.

<form>
  <div class="nj-form-group nj-radio-group nj-radio-group--row has-danger">
    <div class="nj-radio">
      <label>
        <input type="radio" name="has-danger" id="optionsRadios9" value="option1">
        Option number 9
      </label>
    </div>
    <div class="nj-radio">
      <label>
        <input type="radio" name="has-danger" id="optionsRadios10" value="option2">
        Option number 10
      </label>
    </div>
  </div>
</form>