Radio Group

A radio button is an input control that allows the user to give a feedback by choosing a single item from a list of options. For example, you can use radio button when a user may have to select a single option from a list of items or when an explicit action is required to apply the settings in your product.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

<form>
  <fieldset class="nj-radio-group">
    <legend class="nj-radio-group__legend">Please make a choice</legend>
    <div class="nj-radio">
      <label for="optionsRadios1">
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option number 1
      </label>
    </div>
    <div class="nj-radio">
      <label for="optionsRadios2">
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option number 2
      </label>
    </div>
    <div class="nj-radio">
      <label for="optionsRadios3">
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
        Option number 3
      </label>
    </div>
  </fieldset>
</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>
  <fieldset class="nj-radio-group">
    <legend class="nj-radio-group__legend">Please make a choice</legend>
    <div class="nj-radio">
      <label for="optionsRadios1">
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option number 1
      </label>
    </div>
    <div class="nj-radio nj-radio--disabled">
      <label for="optionsRadios2">
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" disabled>
        Option number 2 disabled
      </label>
    </div>
    <div class="nj-radio nj-radio--disabled">
      <label for="optionsRadios3">
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled checked>
        Option number 3 disabled check
      </label>
    </div>
  </fieldset>
</form>

Inline

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

<form>
  <fieldset class="nj-radio-group nj-radio-group--row">
    <legend class="nj-radio-group__legend">Please make a choice</legend>
    <div class="nj-radio">
      <label for="optionsRadios4">
        <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1">
        Option number 4
      </label>
    </div>
    <div class="nj-radio">
      <label for="optionsRadios5">
        <input type="radio" name="optionsRadios1" id="optionsRadios5" value="option2">
        Option number 5
      </label>
    </div>
    <div class="nj-radio nj-radio--disabled">
      <label for="optionsRadios6">
        <input type="radio" name="optionsRadios1" id="optionsRadios6" value="option3" checked disabled>
        Option number 6 disabled
      </label>
    </div>
  </fieldset>
</form>

Error

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

<form>
  <fieldset class="nj-radio-group nj-radio-group--row">
    <legend class="nj-radio-group__legend">Please make a choice (required) <span class="nj-radio-group__error">You must choose an option</span></legend>
    <div class="nj-radio">
      <label for="optionsRadios7">
        <input type="radio" name="optionsRadios2" id="optionsRadios7" value="option1" required>
        Option number 7
      </label>
    </div>
    <div class="nj-radio">
      <label for="optionsRadios8">
        <input type="radio" name="optionsRadios2" id="optionsRadios8" value="option2" required>
        Option number 8
      </label>
    </div>
  </fieldset>
</form>

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

<form>
  <fieldset class="nj-radio-group nj-radio-group--row has-danger">
    <legend class="nj-radio-group__legend">Please make a choice</legend>
    <div class="nj-radio">
      <label for="optionsRadios9">
        <input type="radio" name="optionsRadios3" id="optionsRadios9" value="option1">
        Option number 9
      </label>
    </div>
    <div class="nj-radio">
      <label for="optionsRadios10">
        <input type="radio" name="optionsRadios3" id="optionsRadios10" value="option2">
        Option number 10
      </label>
    </div>
  </fieldset>
</form>

Progress