Disclosure

A collapsible section of content composed of a heading that expands and collapses a panel.

installyarn add @adobe/react-spectrum
added3.38.0
usageimport {Disclosure, DisclosureTitle, DisclosurePanel} from '@adobe/react-spectrum'

Example#


<Disclosure>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure>
  <DisclosureTitle>
    System Requirements
  </DisclosureTitle>
  <DisclosurePanel>
    Details about
    system requirements
    here.
  </DisclosurePanel>
</Disclosure>

Content#


Disclosure follows the ARIA Disclosure pattern and consists of two children: DisclosureTitle and DisclosurePanel. The DisclosureTitle controls the expansion of the DisclosurePanel and the contents inside.

Disclosure can be used as a standalone collapsible section of content. However, multiple discosures can be combined to form an Accordion.

Internationalization#

In order to internationalize a disclosure, all text content within the disclosure should be localized.

Events#


Disclosure accepts an onExpandedChange prop which is triggered when it is expanded or collapsed. The example below uses onExpandedChange to programmatically control disclosure expansion.

function ControlledExpansion() {
  let [isExpanded, setIsExpanded] = React.useState<boolean>(false);

  return (
    <>
      <Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
        <DisclosureTitle>System Requirements</DisclosureTitle>
        <DisclosurePanel>
          Details about system requirements here.
        </DisclosurePanel>
      </Disclosure>
      <div style={{ marginTop: '20px' }}>
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}
function ControlledExpansion() {
  let [isExpanded, setIsExpanded] = React.useState<boolean>(
    false
  );

  return (
    <>
      <Disclosure
        isExpanded={isExpanded}
        onExpandedChange={setIsExpanded}
      >
        <DisclosureTitle>
          System Requirements
        </DisclosureTitle>
        <DisclosurePanel>
          Details about system requirements here.
        </DisclosurePanel>
      </Disclosure>
      <div style={{ marginTop: '20px' }}>
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}
function ControlledExpansion() {
  let [
    isExpanded,
    setIsExpanded
  ] = React.useState<
    boolean
  >(false);

  return (
    <>
      <Disclosure
        isExpanded={isExpanded}
        onExpandedChange={setIsExpanded}
      >
        <DisclosureTitle>
          System
          Requirements
        </DisclosureTitle>
        <DisclosurePanel>
          Details about
          system
          requirements
          here.
        </DisclosurePanel>
      </Disclosure>
      <div
        style={{
          marginTop:
            '20px'
        }}
      >
        {isExpanded
          ? 'The disclosure is expanded'
          : 'The disclosure is collapsed'}
      </div>
    </>
  );
}

The disclosure is collapsed

Props#


Disclosure#

NameTypeDescription
childrenReact.ReactNodeThe contents of the disclosure. The first child should be the header, and the second child should be the panel.
isQuietbooleanWhether the Disclosure should be displayed with a quiet style.
idKeyAn id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys.
isDisabledbooleanWhether the disclosure is disabled.
isExpandedbooleanWhether the disclosure is expanded (controlled).
defaultExpandedbooleanWhether the disclosure is expanded by default (uncontrolled).
Events
NameTypeDescription
onExpandedChange( (isExpanded: boolean )) => voidHandler that is called when the disclosure's expanded state changes.
Layout
NameTypeDescription
flex<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrow<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrink<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasis<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelf<'auto''normal''start''end''center''flex-start''flex-end''self-start''self-end''stretch'>Overrides the alignItems property of a flex or grid container. See MDN.
justifySelf<'auto''normal''start''end''flex-start''flex-end''self-start''self-end''center''left''right''stretch'>Specifies how the element is justified inside a flex or grid container. See MDN.
order<number>The layout order for the element within a flex or grid container. See MDN.
gridArea<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumn<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRow<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStart<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEnd<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStart<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEnd<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
slotstringnull

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.

Spacing
NameTypeDescription
margin<>The margin for all four sides of the element. See MDN.
marginTop<>The margin for the top side of the element. See MDN.
marginBottom<>The margin for the bottom side of the element. See MDN.
marginStart<>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEnd<>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginX<>The margin for both the left and right sides of the element. See MDN.
marginY<>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
width<>The width of the element. See MDN.
minWidth<>The minimum width of the element. See MDN.
maxWidth<>The maximum width of the element. See MDN.
height<>The height of the element. See MDN.
minHeight<>The minimum height of the element. See MDN.
maxHeight<>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
position<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
top<>The top position for the element. See MDN.
bottom<>The bottom position for the element. See MDN.
left<>The left position for the element. See MDN. Consider using start instead for RTL support.
right<>The right position for the element. See MDN. Consider using start instead for RTL support.
start<>The logical start position for the element, depending on layout direction. See MDN.
end<>The logical end position for the element, depending on layout direction. See MDN.
zIndex<number>The stacking order for the element. See MDN.
isHidden<boolean>Hides the element.
Accessibility
NameTypeDescription
aria-labelstringDefines a string value that labels the current element.
aria-labelledbystringIdentifies the element (or elements) that labels the current element.
aria-describedbystringIdentifies the element (or elements) that describes the object.
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.

DisclosureTitle#

NameTypeDefaultDescription
childrenReact.ReactNodeThe contents of the disclosure header.
levelnumber3The heading level of the disclosure header.
Layout
NameTypeDescription
flex<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrow<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrink<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasis<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelf<'auto''normal''start''end''center''flex-start''flex-end''self-start''self-end''stretch'>Overrides the alignItems property of a flex or grid container. See MDN.
justifySelf<'auto''normal''start''end''flex-start''flex-end''self-start''self-end''center''left''right''stretch'>Specifies how the element is justified inside a flex or grid container. See MDN.
order<number>The layout order for the element within a flex or grid container. See MDN.
gridArea<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumn<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRow<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStart<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEnd<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStart<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEnd<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
margin<>The margin for all four sides of the element. See MDN.
marginTop<>The margin for the top side of the element. See MDN.
marginBottom<>The margin for the bottom side of the element. See MDN.
marginStart<>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEnd<>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginX<>The margin for both the left and right sides of the element. See MDN.
marginY<>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
width<>The width of the element. See MDN.
minWidth<>The minimum width of the element. See MDN.
maxWidth<>The maximum width of the element. See MDN.
height<>The height of the element. See MDN.
minHeight<>The minimum height of the element. See MDN.
maxHeight<>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
position<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
top<>The top position for the element. See MDN.
bottom<>The bottom position for the element. See MDN.
left<>The left position for the element. See MDN. Consider using start instead for RTL support.
right<>The right position for the element. See MDN. Consider using start instead for RTL support.
start<>The logical start position for the element, depending on layout direction. See MDN.
end<>The logical end position for the element, depending on layout direction. See MDN.
zIndex<number>The stacking order for the element. See MDN.
isHidden<boolean>Hides the element.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
aria-labelstringDefines a string value that labels the current element.
aria-labelledbystringIdentifies the element (or elements) that labels the current element.
aria-describedbystringIdentifies the element (or elements) that describes the object.
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.

DisclosurePanel#

NameTypeDescription
childrenReact.ReactNodeThe contents of the accordion panel.
Layout
NameTypeDescription
flex<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrow<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrink<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasis<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelf<'auto''normal''start''end''center''flex-start''flex-end''self-start''self-end''stretch'>Overrides the alignItems property of a flex or grid container. See MDN.
justifySelf<'auto''normal''start''end''flex-start''flex-end''self-start''self-end''center''left''right''stretch'>Specifies how the element is justified inside a flex or grid container. See MDN.
order<number>The layout order for the element within a flex or grid container. See MDN.
gridArea<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumn<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRow<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStart<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEnd<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStart<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEnd<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
margin<>The margin for all four sides of the element. See MDN.
marginTop<>The margin for the top side of the element. See MDN.
marginBottom<>The margin for the bottom side of the element. See MDN.
marginStart<>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEnd<>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginX<>The margin for both the left and right sides of the element. See MDN.
marginY<>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
width<>The width of the element. See MDN.
minWidth<>The minimum width of the element. See MDN.
maxWidth<>The maximum width of the element. See MDN.
height<>The height of the element. See MDN.
minHeight<>The minimum height of the element. See MDN.
maxHeight<>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
position<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
top<>The top position for the element. See MDN.
bottom<>The bottom position for the element. See MDN.
left<>The left position for the element. See MDN. Consider using start instead for RTL support.
right<>The right position for the element. See MDN. Consider using start instead for RTL support.
start<>The logical start position for the element, depending on layout direction. See MDN.
end<>The logical end position for the element, depending on layout direction. See MDN.
zIndex<number>The stacking order for the element. See MDN.
isHidden<boolean>Hides the element.
Accessibility
NameTypeDefaultDescription
role'group''region''group'The accessibility role for the disclosure's panel.
idstringThe element's unique identifier. See MDN.
aria-labelstringDefines a string value that labels the current element.
aria-labelledbystringIdentifies the element (or elements) that labels the current element.
aria-describedbystringIdentifies the element (or elements) that describes the object.
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.

Visual Options#


Disabled#

<Disclosure isDisabled>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure isDisabled>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure isDisabled>
  <DisclosureTitle>
    System Requirements
  </DisclosureTitle>
  <DisclosurePanel>
    Details about
    system requirements
    here.
  </DisclosurePanel>
</Disclosure>

Expanded#

<Disclosure defaultExpanded>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure defaultExpanded>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure
  defaultExpanded
>
  <DisclosureTitle>
    System Requirements
  </DisclosureTitle>
  <DisclosurePanel>
    Details about
    system requirements
    here.
  </DisclosurePanel>
</Disclosure>

Details about system requirements here.

Quiet#

<Disclosure isQuiet>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure isQuiet>
  <DisclosureTitle>System Requirements</DisclosureTitle>
  <DisclosurePanel>
    Details about system requirements here.
  </DisclosurePanel>
</Disclosure>
<Disclosure isQuiet>
  <DisclosureTitle>
    System Requirements
  </DisclosureTitle>
  <DisclosurePanel>
    Details about
    system requirements
    here.
  </DisclosurePanel>
</Disclosure>