headlessui/packages/@headlessui-react/src/components/disclosure

Disclosure

A component for showing/hiding content.

• Installation
• Basic example
• Component API

Installation

# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react

Basic example

<Disclosure>
  <Disclosure.Button>Toggle</Disclosure.Button>
  <Disclosure.Panel>Contents</Disclosure.Panel>
</Disclosure>

Component API

Disclosure

<Disclosure>
  <Disclosure.Button>Toggle</Disclosure.Button>
  <Disclosure.Panel>Contents</Disclosure.Panel>
</Disclosure>

Props

Prop	Type	Default	Description
as	String | Component	React.Fragment (no wrapper element)	The element or component the Disclosure should render as.

Render prop object

Prop	Type	Description
open	Boolean	Whether or not the disclosure is open.

Disclosure.Button

Props

Prop	Type	Default	Description
as	String | Component	button	The element or component the Disclosure.Button should render as.

Render prop object

Prop	Type	Description
open	Boolean	Whether or not the disclosure is open.

Disclosure.Panel

Props

Prop	Type	Default	Description
as	String | Component	div	The element or component the Disclosure.Panel should render as.
static	Boolean	false	Whether the element should ignore the internally managed open/closed state.
unmount	Boolean	true	Whether the element should be unmounted or hidden based on the open/closed state.

Note

: static and unmount can not be used at the same time. You will get a TypeScript error if you try to do it.

Render prop object

Prop	Type	Description
open	Boolean	Whether or not the disclosure is open.