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.

Do

• Do use a disclosure to make the page easier to scan, and hide lower-priority information that only some users will need.
• Do ensure that the entire expandable button (label and icon) is clickable.
• Do display the expanded content directly after the expandable button.

Don't

• Don’t use a disclosure if most or all users need to see the content. When content is hidden, users may ignore that information.
• Don’t display a disabled disclosure if there is no content to reveal. Instead, do not display the disclosure at all, or include a message explaining why there is no content when the user activates it.
• Don’t use an icon that has multiple meanings within the same system.

Notes

• If there is only one section of content, then use a disclosure.
• If there are multiple sections of content, then use an accordion or tabs.

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...

Name	Description	Type
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