Show more information to help answer a question

<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>
onRadioChange(event: GoabRadioGroupOnChangeDetail): void {
  console.log("Radio changed:", event.value);
}
<goab-link leadingIcon="arrow-back" size="small" mb="none"> Back </goab-link>

<goab-form-item
  mt="xl"
  label="Do you pay for child care?"
  labelSize="large"
  helpText="Examples of child care are daycares, day homes and baby-sisters."
>
  <goab-radio-group
    name="child-care"
    ariaLabel="Do you pay for child care?"
    (onChange)="onRadioChange($event)"
  >
    <goab-radio-item value="yes" label="Yes"></goab-radio-item>
    <goab-radio-item value="no" label="No"></goab-radio-item>
  </goab-radio-group>
</goab-form-item>

<goab-details 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>
</goab-details>

<goab-button type="submit" mt="2xl">Save and continue</goab-button>
<goa-link leadingicon="arrow-back" size="small" mb="none"> Back </goa-link>

<goa-form-item
  version="2"
  mt="xl"
  label="Do you pay for child care?"
  labelsize="large"
  helptext="Examples of child care are daycares, day homes and baby-sisters."
>
  <goa-radio-group version="2" name="child-care" arialabel="Do you pay for child care?">
    <goa-radio-item value="yes" label="Yes"></goa-radio-item>
    <goa-radio-item value="no" label="No"></goa-radio-item>
  </goa-radio-group>
</goa-form-item>

<goa-details 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>
</goa-details>

<goa-button version="2" type="submit" mt="2xl">Save and continue</goa-button>

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
View old example docs