Disclosure

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

Anatomy

1. Summary Button - a button used to summarize what is conveyed in the disclosure body.
   1. Summary Marker - a visual indicator of the disclosure state.
2. Body - displays the content when expanded and hides the content when collapsed.

Usage

• Use a disclosure when you want to help the users manage their attention on the page.
  Why

  A disclosure helps the user scan content by keeping the primary information visible, allowing them to focus on what’s most relevant.

• A disclosure has two states: collapsed and expanded. A disclosure is collapsed by default.
• A disclosure’s summary button should clearly and succinctly describe its hidden content, allowing users to quickly identify relevant sections without needing to expand every disclosure.
• Ensure that the entire summary button is selectable.
  Why

  Expanding the target area improves usability, making it easier for users to interact with the disclosure, especially on touch devices.

• If multiple related disclosures are needed, use an (accordion).

Don't

• Don't nest disclosures within each other.
  • Why: Nested disclosures are difficult to navigate and not easily accessible.
• Don’t use a disabled disclosure when there is no content to reveal.
  • Why: A disabled disclosure can confuse users, making them wonder if something is broken or missing.

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.	"left" | "right" | ((panel?: boolean) => "left" | "right" | 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