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 demo Open in new window
320 x 568
View 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 demo Open in new window
320 x 568
View 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>