You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.


The Question component helps to structure form fields when using the Design System

Sample HTML

<div class="ds_question  ds_question--error">
    <label class="ds_label" for="more-detail">Please provide more detail</label>
    <p class="ds_hint-text" id="hint-text-more-detail">Do not include personal or financial information, like your National Insurance number or credit card details.</p>
    <p class="ds_question__error-message" id="error-message-more-detail">This field is required</p>
    <textarea rows="5" class="ds_input  ds_input--error" id="more-detail" name="more-detail" aria-invalid="true" aria-required="true" aria-describedby="hint-text-more-detail error-message-more-detail"></textarea>

About this component

Asking for user input is more than just having a label and an input element. Questions can include more information such as:

  • instructions to help the user complete the field
  • an error message

Anatomy of a question

There are many parts to a question:

  • a label

  • optional hint text

  • a potential error message

  • a form field or group of fields

A screenshot of a question in an error state, with its various parts labelled. Those parts are: label, hint text, error message and the form field
The various parts that make up a 'question'

‘Question’ wrapper

This element holds all the other parts of the question. It groups all the related parts together and provides a styling hook for error states. If a form field is in an invalid state, add a class of ds_question--error. This highlights the whole question so it is very clear to the user where the error is.


Every form field needs to have a label, to let the user know what the form field is for. Labels should be concise, at best no more than a few words. Consider using regular text or hint text below the label if you need a longer description.

Hint text

If there is a need give the user more information about how to answer the question, you can add some hint text.

Hint text should have an ID attribute so that ARIA attributes can relate it to the form field. For example, by using the aria-describedby attribute on the form field.

Error message

Show an error message when the form field fails validation checks.

Form field

The form field itself. If the question has hint text, the field should have an aria-describedby attribute relating it to hint text.

Other versions of this component

Questions with more than one form field

Sample HTML

<div class="ds_question">
        <legend>How will the payments be paid in?</legend>
        <div class="ds_field-group">
            <div class="ds_radio">
                <input aria-describedby="hint-text-advance" 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" id="hint-text-advance">This means you're paid for the period coming up, i.e. the month ahead</p>
            <div class="ds_radio">
                <input aria-describedby="hint-text-arrears" 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" id="hint-text-arrears">This means you're paid for the time that's just passed, i.e. for the last month</p>

If a question has more than one form field, the form fields and their labels should be inside a fieldset element. Put the fieldset’s legend element where the label would be in a single-field question.

You can use hint text can for either the whole question or each individual field. If the hint applies to the whole question, put it after the legend element.

Why we use this component

The question component provides a consistent structure for form fields and related content. The ‘question’ wrapping element is useful for styling and for performing form validation.

Back to top