Components / Collections
Disclosure
A styled native details element: a 44px summary with a chevron and a count, a panel that stays in the page, no JavaScript.
@fabrials/ui
Advanced options
Options that most people never change.
Conversation3
Three messages in this conversation.
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { Disclosure, DisclosureSummary, DisclosurePanel } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
Disclosure open / onToggle / name | details props | Native: name makes an exclusive group. |
Disclosure revealInvalid | boolean | Opens itself when a field inside fails validation so the browser can focus it. On by default. |
DisclosureSummary count | ReactNode | After the label, inside the summary: part of its name. |
DisclosureSummary chevron | end | start | none | end turns from down to up; start points to the inline end when closed. |
DisclosureSummary size | sm | md | lg | md is the 44px default, lg a section title, sm a quiet line with an invisible 44px target. |
Behavior
Server-rendered exactly as it hydrates. Use Accordion for a set of exclusive animated sections and Collapsible for a trigger you control.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.