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: Event): void {
    console.log("Radio changed:", event);
  }

<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