Question

<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>
</div>

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

‘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.

Label

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

<div class="ds_question">
    <fieldset>
        <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>
            <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>
            </div>
        </div>
    </fieldset>
</div>

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.