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