Skip to main content

Disclosure

A native <details> for what's secondary, optionally showing what's chosen inside it while closed (the fold with a summary value).

CSS: css/components/disclosure.css. Classes: .al-disclosure, .al-disclosure__body, .al-disclosure__value, .al-disclosure-group.

On its own page, in English and Arabic

Anatomy​

HTML
<details class="al-disclosure">
  <summary>Workplace pension <span class="al-disclosure__value">5%, salary sacrifice</span></summary>
  <div class="al-disclosure__body">…fields…</div>
</details>

Variants and sizes​

Plain (no value) and with __value. Stack several with no gap: each draws a rule above it. In a .al-disclosure-group (React DisclosureGroup), the last draws one below too: for questions and answers.

States​

Hover: the summary takes the accent. Focus: the system outline on the summary. Open: the chevron turns down.

Keyboard​

Enter or Space on the summary toggles (native).

ARIA​

Native; nothing to add. The value is inside the summary, so it's read with the name.

Right to left​

The chevron points the way text reads (left in Arabic) and turns down when open; the value sits at the end.

Do and don't​

Do
  • Show the current value in the summary, so it can be checked without opening it.
  • Fold detail and rarely changed settings.
Don't
  • Fold the primary action, or an error.
  • Nest disclosures more than one deep.

Tokens​

The 13 tokens it uses

--al-border-hairline, --al-color-accent, --al-color-line, --al-color-text-muted, --al-duration-fast, --al-ease-standard, --al-size-target-min, --al-space-2, --al-space-3, --al-space-4, --al-text-sm, --al-weight-medium, --al-weight-regular