Designsystem.gov.scot uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve our websites. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies.

Cookie settings

Your cookie settings have been saved.

Component

Radio buttons

Form fields that allow users to pick a single item

Open this example in a new window

Sample HTML 

<form>
    <fieldset>
        <legend>Was this page useful?</legend>
        <p class="ds_hint-text">Select an option</p>

        <div class="ds_field-group">
            <div class="ds_radio">
                <input class="ds_radio__input" id="useful-yes" name="feedback-type" type="radio" value="yes" />
                <label class="ds_radio__label" for="useful-yes">Yes</label>
            </div>

            <div class="ds_radio">
                <input class="ds_radio__input" id="useful-no" name="feedback-type" type="radio" value="no" />
                <label class="ds_radio__label" for="useful-no">No</label>
            </div>

            <div class="ds_radio">
                <input class="ds_radio__input" id="useful-maybe" name="feedback-type" type="radio" value="maybe" />
                <label class="ds_radio__label" for="useful-maybe">Maybe</label>
            </div>
        </div>
    </fieldset>
</form>

About this component

Radio buttons are a form component that allows users to select a single item from a list of options.

Why we use this component

We use this component when we want users to be able to only pick one option from a list.

If there are lots of options, you should think about whether a select component would work better.

If users need to be able to pick more than one option from a list, use the checkboxes component instead.

Other versions of this component

Radio buttons with hint text

Hint text can be added to radio buttons. You can use hint text for more details about a radio button. You should avoid adding hint text to the radio button’s label element.

Open this example in a new window

Sample HTML 

<form>
    <fieldset>
        <legend>How will the payments be paid in?</legend>

        <div class="ds_field-group">
            <div class="ds_radio">
                <input class="ds_radio__input" id="payment-advance" name="payment-type" type="radio" value="advance" />
                <label class="ds_radio__label" for="payment-advance">Advance</label>
                <p class="ds_hint-text">This means you're paid for the period coming up, i.e. the month ahead</p>
            </div>

            <div class="ds_radio">
                <input class="ds_radio__input" id="payment-arrears" name="payment-type" type="radio" value="arrears" />
                <label class="ds_radio__label" for="payment-arrears">Arrears</label>
                <p class="ds_hint-text">This means you're paid for the time that's just passed, i.e. for the last month</p>
            </div>
        </div>
    </fieldset>
</form>

Small radio buttons

Although small radio buttons appear smaller, their clickable area remains the same as normal radio buttons. This makes them easier for users to select.

Open this example in a new window

Sample HTML 

<form>
    <fieldset>
        <legend>Is a letting agency managing the property?</legend>

        <div class="ds_field-group  ds_field-group--inline">
            <div class="ds_radio  ds_radio--small">
                <input class="ds_radio__input" id="letting-agent-yes" name="letting-agent" type="radio" value="yes" />
                <label class="ds_radio__label" for="letting-agent-yes">Yes</label>
            </div>

            <div class="ds_radio  ds_radio--small">
                <input class="ds_radio__input" id="letting-agent-no" name="letting-agent" type="radio" value="no" />
                <label class="ds_radio__label" for="letting-agent-no">No</label>
            </div>
        </div>
    </fieldset>
</form>

Error messages

The error state for radio buttons marks the entire fieldset.

Open this example in a new window

Sample HTML 

<form>
    <div class="ds_question  ds_question--error" id="error-id-one">
        <fieldset aria-invalid="true">
            <legend>Did this resolve your issue?</legend>
            <p class="ds_hint-text">Hint text</p>
            <p class="ds_question__error-message">This field is required</p>

            <div class="ds_field-group">
                <div class="ds_radio">
                    <input class="ds_radio__input" id="resolve-yes" name="resolve" type="radio" value="yes" />
                    <label class="ds_radio__label" for="resolve-yes">Yes</label>
                </div>

                <div class="ds_radio">
                    <input class="ds_radio__input" id="resolve-no" name="resolve" type="radio" value="no" />
                    <label class="ds_radio__label" for="resolve-no">No</label>

                    <div class="ds_reveal-content">
                        <p><strong>Next step:</strong> <a href="#">leave us some feedback</a>.</p>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</form>

Inline radio buttons

If there are few options and each has a short label, they can be placed inline.

If you are using an inline display for a yes/no choice, make ‘Yes’ the first option.

Open this example in a new window

Sample HTML 

<form>
    <fieldset>
        <legend>Is a letting agency managing the property?</legend>

        <div class="ds_field-group  ds_field-group--inline">
            <div class="ds_radio">
                <input class="ds_radio__input" id="letting-agent-yes" name="letting-agent" type="radio" value="yes" />
                <label class="ds_radio__label" for="letting-agent-yes">Yes</label>
            </div>

            <div class="ds_radio">
                <input class="ds_radio__input" id="letting-agent-no" name="letting-agent" type="radio" value="no" />
                <label class="ds_radio__label" for="letting-agent-no">No</label>
            </div>
        </div>
    </fieldset>
</form>

Accessibility

We use a custom style for radio buttons so that they’re larger and easier to use than the standard radio buttons defined by the user’s browser. We also use a custom style to make their focussed and selected states clearer.

Website analytics

Radio buttons can be tracked through the original page path, a data attribute showing the question type, and value selected, for example data-form="radio-feedback-yes"

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top