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

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

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>