DisclosureContent

Renders an element that can be shown or hidden by a Disclosure component.

Code examples

<DisclosureProvider>
  <Disclosure>Disclosure</Disclosure>
  <DisclosureContent>Content</DisclosureContent>
</DisclosureProvider>
<DisclosureProvider>
  <Disclosure>Disclosure</Disclosure>
  <DisclosureContent>Content</DisclosureContent>
</DisclosureProvider>

Optional Props

`alwaysVisible`

boolean | undefined = false
boolean | undefined = false

Determines whether the content element should remain visible even when the open state is false. If this prop is set to true, the hidden prop and the display: none style will not be applied, unless explicitly set otherwise.

This prop is particularly useful when using third-party animation libraries such as Motion or React Spring, where the element needs to be visible for exit animations to work.

Live examples

Dialog with MotionUsing Motion to add initial and exit animations to a modal Dialog and its backdrop element.

Menu with MotionAbstracting Menu into a reusable dropdown menu component that uses Motion to create smooth initial and exit animations.

Tooltip with MotionAbstracting Tooltip into a reusable custom component that uses Motion to create smooth initial and exit animations.

Dialog with details & summaryCombining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.

`render`

RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined
RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Some Ariakit components detect the type of the underlying element when they mount. If the render element's type may change while the component is mounted, pass a key⁠ prop that changes with the element type so React remounts the component with the new element. Remounting resets uncontrolled state, so keep the relevant state controlled:

<Checkbox
  key={custom ? "custom" : "native"}
  checked={checked}
  onChange={() => setChecked(!checked)}
  render={custom ? <div /> : <input />}
/>
<Checkbox
  key={custom ? "custom" : "native"}
  checked={checked}
  onChange={() => setChecked(!checked)}
  render={custom ? <div /> : <input />}
/>

Check out the Composition guide for more details.

`store`

DisclosureStore | undefined
DisclosureStore | undefined

Object returned by the useDisclosureStore hook. If not provided, the closest DisclosureProvider component's context will be used.

`unmountOnHide`

boolean | undefined = false
boolean | undefined = false

When set to true, the content element will be unmounted and removed from the DOM when it's hidden.

Live examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

Combobox with integrated filterFiltering options in a Combobox component through an abstracted implementation using React.useDeferredValue, resulting in a simple higher-level API.

Textarea with inline ComboboxRendering Combobox as a textarea element to create an accessible multiline textbox in React. Inserting specific characters triggers a popup with dynamic suggestions.

Standalone PopoverAbstracting the Popover component so that it can be used without PopoverDisclosure or PopoverAnchor. This example uses the getAnchorRect prop to determine the position of the popup.

Animated SelectAnimating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

Multi-SelectAllowing the Select component to select multiple values by passing an array to the defaultValue prop on the SelectProvider component.

DisclosureContent

Code examples

Optional Props

alwaysVisible

Live examples

render

store

unmountOnHide

Live examples

Stay tuned

`alwaysVisible`

`render`

`store`

`unmountOnHide`