Back to all examples

Expand or collapse part of a form

ReactAngularWeb Components
dl.accordion-example {
  margin: 0 0;
}
.accordion-example dt {
  color: var(--goa-color-text-default);
  font: var(--goa-typography-heading-s);
  margin-bottom: var(--goa-space-xs);
}
.accordion-example dd {
  margin: 0 0 var(--goa-space-l);
  font: var(--goa-typography-body-m);
}
.accordion-example dd:last-of-type {
  margin-bottom: 0;
}
<GoabText as="h3" mt="none" mb="m">Review your application</GoabText>

      <GoabAccordion
        heading="Referral details"
        headingContent={<GoabBadge type="important" content="Updated" />}>
        <dl className="accordion-example">
          <dt>Date of referral</dt>
          <dd>January 27, 2021</dd>
          <dt>Work safety concerns</dt>
          <dd>None</dd>
          <dt>Type of referral</dt>
          <dd>Word of mouth, internet search</dd>
          <dt>Intake received from another site</dt>
          <dd>Yes</dd>
        </dl>
      </GoabAccordion>

      <GoabAccordion heading="Contact information">
        <dl className="accordion-example">
          <dt>Name</dt>
          <dd>Joan Smith</dd>
          <dt>Contact preference</dt>
          <dd>Text message</dd>
        </dl>
      </GoabAccordion>

Use accordions to organize form review sections that users can expand or collapse.

When to use

Use this pattern when:

  • Presenting a review summary of form sections before submission
  • Users need to verify information across multiple categories
  • Sections contain detailed information that may not need constant visibility
  • You want to highlight sections that have been updated

Considerations

  • Use headingContent to add badges or status indicators to section headers
  • Use definition lists (<dl>) for structured label/value pairs
  • Apply consistent spacing with CSS custom properties
  • Consider defaulting important or recently updated sections to expanded state