Radio Button

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.

React

Angular

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>

Progress

Select