Skip to main content

Disclosure

A disclosure allows the user to show and hide additional content.

Anatomy

  1. Summary button - a control that opens or closes the disclosure and conveys to the user what is contained in the disclosure body.
  2. Summary marker - an icon that indicates that the disclosure can be opened or closed.
    • When displayed before the label, the marker should point to the right when closed and down when open.
    • When displayed after the label, the marker should point down when closed and up when open.
  3. Body - the disclosed contents, as summarized by the summary button.

Usage

Use a disclosure when you want to help the user manage their attention on the page. Disclosures allow the user to skip over secondary content or features by not expanding the disclosure, while still giving them the option to delve deeper should they choose to expand it. The disclosure is named for the principle of progressive disclosure.

  • A disclosure has two states: collapsed and expanded. A disclosure is collapsed by default.
  • A disclosure should include an icon that conveys that it can be activated for more information.
  • A disclosure’s label should clearly and succinctly describe its hidden content, so that the user can choose to expand it.
  • When a disclosure has focus, Enter and Space activate the disclosure and toggle the visibility of content.
  • All focusable elements inside a disclosure are included in the tab order, if the disclosure is expanded.

React API

import { Disclosure } from '@wwnds/react';

Disclosure

Live Editor
<Disclosure panel summary="Default disclosure">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
</Disclosure>
Result
Loading...
NameDescriptionType
summary (required)
The content for the summary element generated by the disclosure component.ReactNode
marker

The marker icon that indicates the disclosure's current state. Similar to the CSS ::marker. The default is caret-right. When panel is true, the default is chevron-down.

IconVariant | SVGIcon | ((panel?: boolean) => IconVariant | SVGIcon | null) | null | undefined
markerPosition
The position of the marker. right when panel={true} and left otherwise."right" | "left" | ((panel?: boolean) => "right" | "left" | null) | null | undefined
markerTransform
How the marker should move when it opens. Default is "rotate-90"."none" | "rotate-90" | "flip-3d"
isOpen
Used to set the initial open state or fully control it.boolean
panel

Indicates that the disclosure should be in "panel" mode, which has a few effects:

  • The default marker will be chevron-down
  • The default markerPosition will be right
  • The default markerTransform will be flip-3d
  • The disclosure will be given the nds-disclosure--panel modifier class
boolean
reducedMotion
Indicates that animations should be disabled.boolean
baseName
The base className according to BEM conventions.string
summaryClass
The className that will be applied to the <summary>.string
contentsOuterClass
The className for the outer contents <div>.string
contentsInnerClass
The className that will be applied to the inner contents <div>.string
markerClass

The className that will be applied to the summary's icon indicator, which takes the place of the native summary::marker pseudo element.

string
onCloseStart

Lifecycle method that is triggered when the disclosure begins to close. Returning false will prevent the disclosure from beginning to close.

LifecycleCallback
onCloseCancel

Lifecycle method that is triggered when the user clicks on the disclosure as it's closing. Returning false will cause the disclosure to continue closing.

LifecycleCallback
onCloseEnd
Lifecycle method that is triggered when the disclosure has finished closing.LifecycleCallback
onOpenStart

Lifecycle method that is triggered when the disclosure begins to open. Returning false will prevent the disclosure from beginning to open.

LifecycleCallback
onOpenCancel

Lifecycle method that is triggered when the user clicks on the disclosure as it's opening. Returning false will cause the disclosure to continue opening.

LifecycleCallback
onOpenEnd
Lifecycle method that is triggered when the disclosure has finished opening.LifecycleCallback