Radio input
Select only one
Remember, when working with forms, add the aria-describedby
attribute, and some helpful text, to allow a seamless experience for everybody.
Keep your form on a white background to enable full contrast ratios for form validation messages.
Use the radio component when the user must select only one option.
How they look
View demoView code
<fieldset>
<legend class="gg-c-radio__legend">Select a phone</legend>
<label class="gg-c-radio__label" for="iphone">
<input class="gg-c-radio__input" type="radio" id="iphone" value="iPhone" name="phone" /><span class="gg-c-radio__text">iPhone</span>
</label>
<label class="gg-c-radio__label" for="galaxy">
<input class="gg-c-radio__input" type="radio" id="galaxy" value="Galaxy" name="phone" /><span class="gg-c-radio__text">Galaxy</span>
</label>
<p class="gg-c-form__element-message gg-c-form__element-message--invalid">This field is required</p>
</fieldset>
With error state
View demoView code
<fieldset class="gg-c-form__element--invalid">
<legend class="gg-c-radio__legend">Select a phone</legend>
<label class="gg-c-radio__label" for="iphone">
<input class="gg-c-radio__input" type="radio" id="iphone" value="iPhone" name="phone" /><span class="gg-c-radio__text">iPhone</span>
</label>
<label class="gg-c-radio__label" for="galaxy">
<input class="gg-c-radio__input" type="radio" id="galaxy" value="Galaxy" name="phone" /><span class="gg-c-radio__text">Galaxy</span>
</label>
<p class="gg-c-form__element-message gg-c-form__element-message--invalid">This field is required</p>
</fieldset>