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" 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 additional information such as instructions to help the user complete the field, or an error message.

Anatomy of a question

A question is made up of many parts: a label, optional hint text, a potential error message and a form field (or group of fields if they are checkboxes or radio buttons).

‘Question’ wrapper

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

Label

Labels are required for any form field, 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 the form field can be related to it with ARIA attributes.

Error message

If the form field has failed validation, an error message is inserted or shown.

Form field

The form field itself. If the question has hint text, the form field should have an aria-describedby attribute indicating the ID of the hint text.

Other versions of this component

Questions with multiple form fields

<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, for example a collection of radio buttons or checkboxes, the form fields and their associated labels should all be within a fieldset element, and the fieldset’s legend element should be used where the label is placed in a single-field question.

Hint text can be used below the legend as a hint for the whole question, or below each form field’s label to provide a hint that is specific to that option.

Why we use this component

The Question component provides a consistent structure for form fields and any related content that goes alongside them such as hint text or error messaging. The ‘question’ wrapping element is useful both for styling and for performing client-side form validation.