Expand or collapse part of a form

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={<GoabxBadge 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>

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;
}

// No logic required for this static example

<goab-text as="h3" mt="none" mb="m">Review your application</goab-text>

<goab-accordion heading="Referral details" [headingContent]="importantBadge">
  <ng-template #importantBadge>
    <goabx-badge type="important" content="Updated"></goabx-badge>
  </ng-template>
  <dl class="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>
</goab-accordion>

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

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;
}

<goa-text as="h3" mt="none" mb="m">Review your application</goa-text>

<goa-accordion heading="Referral details">
  <goa-badge version="2" slot="headingcontent" type="important" content="Updated"></goa-badge>
  <dl class="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>
</goa-accordion>

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

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