Back to all examples

Show more information to help answer a question

ReactAngularWeb Components
<GoabLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabLink>

      <GoabFormItem
        mt="xl"
        label="Do you pay for child care?"
        labelSize="large"
        helpText="Examples of child care are daycares, day homes and baby-sisters."
      >
        <GoabRadioGroup
          name="child-care"
          ariaLabel="Do you pay for child care?"
          onChange={() => {}}
        >
          <GoabRadioItem value="yes" label="Yes" />
          <GoabRadioItem value="no" label="No" />
        </GoabRadioGroup>
      </GoabFormItem>

      <GoabDetails heading="Why are we asking this question?" mt="l">
        <p>We ask this question to determine if you are eligible for child care benefits.</p>
      </GoabDetails>

      <GoabButton type="submit" mt="2xl">
        Save and continue
      </GoabButton>

Use the Details component to provide optional contextual help that explains why a question is being asked, helping users understand the purpose without cluttering the main form.

When to use

Use this pattern when:

  • Users may wonder why a question is being asked
  • Additional context helps users answer correctly
  • The information is optional and shouldn’t distract
  • Following question page patterns for citizen services

Considerations

  • Place the details component after the question input
  • Use a clear heading like “Why are we asking this question?”
  • Keep the expanded content concise and helpful
  • Include helper text for the main question when appropriate