Primitives

Disclosure

A single trigger that shows or hides a related region of content.

forty-cdk/disclosure WAI-ARIA APG

Toggle the panel with the pointer or Enter and watch data-state flip on the trigger and the content together, so one rule animates both.

Source

One headless primitive, a styleless trigger, and the panel you are reading. Behavior, ARIA and focus are handled for you; the styling is entirely yours.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ForDisclosure, ForDisclosureContent, ForDisclosureTrigger } from 'forty-cdk/disclosure';

@Component({
  selector: 'app-disclosure-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForDisclosure, ForDisclosureTrigger, ForDisclosureContent],
  template: `
    <div forDisclosure class="dis" [(open)]="open">
      <button type="button" forDisclosureTrigger class="dis-trigger">
        <span>What is inside the box?</span>
        <span class="chevron" aria-hidden="true"></span>
      </button>
      <div forDisclosureContent class="dis-content">
        <div class="dis-inner">
          <p>
            One headless primitive, a styleless trigger, and the panel you are reading. Behavior,
            ARIA and focus are handled for you; the styling is entirely yours.
          </p>
        </div>
      </div>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .dis {
      width: min(440px, 100%);
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius, 22px);
      corner-shape: squircle;
      overflow: hidden;
    }

    .dis-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      font: inherit;
      font-weight: 600;
      text-align: left;
      color: var(--ex-text, #17191c);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .dis-trigger:hover {
      background: var(--ex-surface-2, #f2eee6);
    }

    .chevron {
      flex: none;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--ex-muted, #585d66);
      border-bottom: 2px solid var(--ex-muted, #585d66);
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .dis-trigger[data-state='open'] .chevron {
      transform: rotate(-135deg);
    }

    .dis-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.25s ease;
    }

    .dis-content[data-state='open'] {
      grid-template-rows: 1fr;
    }

    .dis-inner {
      overflow: hidden;
    }

    .dis-inner p {
      margin: 0;
      padding: 0 1rem 0.95rem;
      color: var(--ex-muted, #585d66);
    }

    @media (prefers-reduced-motion: reduce) {
      .dis-content,
      .chevron {
        transition: none;
      }
    }
  `,
})
export class DisclosureDefaultExample {
  protected readonly open = signal(true);
}

A button toggles the visibility of a content region, wired with aria-expanded and aria-controls.

When to choose

Disclosure: one trigger and one region, independent of everything around it. Nothing coordinates it with a neighbour, so several on a page open and close freely.
Accordion: a group of items under one root sharing a [(value)]. Single mode closes the open panel when another opens, multiple allows several, and arrow keys move focus between the triggers. Choose it when the sections belong together and their open state is one decision.

Anatomy

<div forDisclosure [(open)]="isOpen">
  <button type="button" forDisclosureTrigger>{{ isOpen() ? 'Hide' : 'Show' }} details</button>
  <div forDisclosureContent>Hidden content goes here.</div>
</div>

Examples

States

One class and one directive, two states. disabled drops the trigger from the tab order and blocks toggling, so the panel stays where it is; the root and the trigger both reflect data-disabled, which is all the example's stylesheet keys on.

Source

Default

Behavior, ARIA and focus are handled for you; the styling is entirely yours.

Disabled

The trigger leaves the tab order and ignores clicks and keys.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { ForDisclosure, ForDisclosureContent, ForDisclosureTrigger } from 'forty-cdk/disclosure';

@Component({
  selector: 'app-disclosure-states-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForDisclosure, ForDisclosureTrigger, ForDisclosureContent],
  template: `
    <div class="states">
      <div class="state">
        <span class="state-label">Default</span>
        <div forDisclosure class="dis" [(open)]="open">
          <button type="button" forDisclosureTrigger class="dis-trigger">
            <span>What is inside the box?</span>
            <span class="chevron" aria-hidden="true"></span>
          </button>
          <div forDisclosureContent class="dis-content">
            <div class="dis-inner">
              <p>Behavior, ARIA and focus are handled for you; the styling is entirely yours.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="state">
        <span class="state-label">Disabled</span>
        <div forDisclosure class="dis" [(open)]="open" disabled>
          <button type="button" forDisclosureTrigger class="dis-trigger">
            <span>This section is locked</span>
            <span class="chevron" aria-hidden="true"></span>
          </button>
          <div forDisclosureContent class="dis-content">
            <div class="dis-inner">
              <p>The trigger leaves the tab order and ignores clicks and keys.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: `
    :host {
      display: contents;
    }

    .states {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      width: min(440px, 100%);
    }

    .state {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .state-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ex-muted, #585d66);
    }

    .dis {
      background: var(--ex-surface, #ffffff);
      border: 1px solid var(--ex-border, #e5e0d6);
      border-radius: var(--ex-radius, 22px);
      corner-shape: squircle;
      overflow: hidden;
    }

    .dis[data-disabled] {
      opacity: 0.5;
    }

    .dis-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      font: inherit;
      font-weight: 600;
      text-align: left;
      color: var(--ex-text, #17191c);
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    .dis-trigger:hover:not([data-disabled]) {
      background: var(--ex-surface-2, #f2eee6);
    }

    .dis-trigger[data-disabled] {
      cursor: not-allowed;
    }

    .chevron {
      flex: none;
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--ex-muted, #585d66);
      border-bottom: 2px solid var(--ex-muted, #585d66);
      transform: rotate(45deg);
      transition: transform 0.2s ease;
    }

    .dis-trigger[data-state='open'] .chevron {
      transform: rotate(-135deg);
    }

    .dis-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.25s ease;
    }

    .dis-content[data-state='open'] {
      grid-template-rows: 1fr;
    }

    .dis-inner {
      overflow: hidden;
    }

    .dis-inner p {
      margin: 0;
      padding: 0 1rem 0.95rem;
      color: var(--ex-muted, #585d66);
    }

    @media (prefers-reduced-motion: reduce) {
      .dis-content,
      .chevron {
        transition: none;
      }
    }
  `,
})
export class DisclosureStatesExample {
  protected readonly open = signal(true);
}

API

`ForDisclosure`

Property	Type	Description
`open`	`model`	Two-way bindable open state. Default: `false`
`disabled`	`input`	When true, click on the trigger is ignored. Reflects `data-disabled` on the host. Default: —

Data attribute	Values
`data-state`	`open` \| `closed`
`data-disabled`	present \| absent

`ForDisclosureTrigger`

Property	Type	Description
`disabled`	`input`	Disables this trigger only, merged OR with the root's `disabled`. Default: —

Data attribute	Values
`data-state`	`open` \| `closed`
`data-disabled`	present \| absent

Reflects on its host: id, aria-expanded, aria-controls, disabled, data-state. Toggles the state on click. The disabled reflection and the click guard follow the effective state, which is the trigger's own disabled OR the root's. That reflection is the native disabled attribute plus data-disabled, with no aria-disabled: one channel only.

aria-controls is emitted only while open (mirroring the overlay triggers' open-only gating), so the reference never dangles at an unmounted panel under the recommended @if (open()) mount pattern.

Use a native <button type="button"> so Enter / Space activation come for free. Other elements lose keyboard accessibility, and that is on you.

`ForDisclosureContent`

Data attribute	Values
`data-state`	`open` \| `closed`
`data-disabled`	present \| absent

Reflects on its host: id, data-state, data-disabled, aria-hidden (when closed), inert (when closed).

The directive does not apply [hidden] or otherwise control DOM presence. Two patterns work:

Mount/unmount with @if (open()): the panel is absent from the DOM while closed; idiomatic for animate.enter / animate.leave.
Leave it mounted: preserve scroll/input state or run CSS-only transitions off data-state. While closed, the directive sets aria-hidden="true" and inert on the host so the panel is removed from the accessibility tree and focus order. Add display: none (or your own collapse animation) keyed on [data-state="closed"] to also hide it visually.

If the panel is a semantic region, add role="region" and aria-labelledby="..." pointing to the trigger.

Accessibility

Implements the WAI-ARIA Disclosure pattern.

The library does not auto-add role="button" or keyboard handlers when the trigger is not a <button>. Always use a real button.
The directive does not apply the native hidden attribute to the content. Either wrap it with @if (open()) so it unmounts when closed, or leave it mounted and rely on the aria-hidden="true" + inert reflection that keeps the closed panel out of the accessibility tree and focus order. Visual hiding (and enter/leave transitions) are still on you. Drive them off [data-state].
Disabled state sets the native disabled attribute on the trigger (effective on <button> elements). Click is also ignored at the directive level as a defensive measure. The trigger can be disabled from the root ([forDisclosure] [disabled]) or per trigger ([forDisclosureTrigger] [disabled]); either source disables it.

Styling

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

.dis-trigger .chevron {
  transition: transform 150ms ease;
}
.dis-trigger[data-state='open'] .chevron {
  transform: rotate(180deg);
}

Wrapping in a design system

Subclass the root and re-provide FOR_DISCLOSURE_CONTEXT with useExisting pointing at the subclass, since Angular does not inherit a directive's providers; Wrapping non-form roots walks the pattern.