Radio buttons

Guidance

Use radio buttons when users can only select one option.

Most of the time, basic radio buttons should be used. For times when the options are a label paired with a description, you can use the extended version.

Groups of radio buttons are presented in a <fieldset>, using <legend> (which gets styled as a label) for the leading text.

Radio buttons

<!-- Radio button group -->
<fieldset class="gnb-radio-buttons">
	<legend>Do you want to be notified?</legend>
	<div class="pair">
		<input type="radio" name="form-radio-2" id="radio-1-a" checked>
		<label for="radio-1-a">Yes</label>
	</div>
	<div class="pair">
		<input type="radio" name="form-radio-2" id="radio-2-a">
		<label for="radio-2-a">No</label>
	</div>
</fieldset>

Radio buttons expanded

<!-- Radio buttons expanded-->
<fieldset class="gnb-radio-buttons-expanded">
	<legend>Lorem ipsum dolor sit amet dur consectetur:</legend>
	<div class="set">
		<label for="defaultState">
		<input type="radio" id="defaultState" name="language" value="default">
			<span class="label-title">Default</span>
			<span class="label-content">
				This is the default state.
			</span>
		</label>
		<label for="checkedState" class="active">
		<input type="radio" id="checkedState" name="language" value="checked" checked>
			<span class="label-title">Checked</span>
			<span class="label-content">
				When selected, apply the 'active' class to the label element.
			</span>
		</label>
	</div>
</fieldset>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-forms-1.0.0.js"></script>