alpha
Disclosure
A collapsible section of content composed of a heading that expands and collapses a panel.
Under construction
This component is in alpha . More documentation is coming soon! < Disclosure >
< DisclosureHeader > System Requirements< / DisclosureHeader >
< DisclosurePanel >
< p > Details about system requirements here.< / p >
< / DisclosurePanel >
< / Disclosure > < Disclosure >
< DisclosureHeader > System Requirements< / DisclosureHeader >
< DisclosurePanel >
< p > Details about system requirements here.< / p >
< / DisclosurePanel >
< / Disclosure > < Disclosure >
< DisclosureHeader >
System Requirements
< / DisclosureHeader >
< DisclosurePanel >
< p >
Details about
system
requirements
here.
< / p >
< / DisclosurePanel >
< / Disclosure >
Name Type Description children React.ReactNode The contents of the disclosure. The first child should be the header, and the second child should be the panel. id Key An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys. isDisabled boolean Whether the disclosure is disabled. isExpanded boolean Whether the disclosure is expanded (controlled). defaultExpanded boolean Whether the disclosure is expanded by default (uncontrolled).
Name Type Description onExpandedChange (
( isExpanded : boolean
) ) => void Handler that is called when the disclosure's expanded state changes.
Name Type Description slot string | null A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
Name Type Description aria-label string Defines a string value that labels the current element. aria-labelledby string Identifies the element (or elements) that labels the current element. aria-describedby string Identifies the element (or elements) that describes the object. aria-details string Identifies the element (or elements) that provide a detailed, extended description for the object.
Name Type Default Description children React.ReactNode — The contents of the disclosure header. level number 3 The heading level of the disclosure header.
Name Type Description id string The element's unique identifier. See MDN . aria-label string Defines a string value that labels the current element. aria-labelledby string Identifies the element (or elements) that labels the current element. aria-describedby string Identifies the element (or elements) that describes the object. aria-details string Identifies the element (or elements) that provide a detailed, extended description for the object.
Name Type Description children React.ReactNode The contents of the accordion panel.
Name Type Default Description role 'group' | 'region' 'group' The accessibility role for the disclosure's panel. id string — The element's unique identifier. See MDN . aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-details string — Identifies the element (or elements) that provide a detailed, extended description for the object.