Skip to content
Lenso UI

Disclosure

A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.

Usage

import { Disclosure } from '@lenso/ui';
"use client";// Independent React adaptation of the excluded pinned Native-preview source.import { PreviewDisclosure } from "./render-function";export function Basic() {  return <PreviewDisclosure />;}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

import { Disclosure } from '@lenso/ui';
export default () => (  <Disclosure>    <Disclosure.Heading>      <Disclosure.Trigger>        <Disclosure.Indicator />      </Disclosure.Trigger>    </Disclosure.Heading>    <Disclosure.Content/>  </Disclosure>)

Examples

Render Function

"use client";// React adaptation of HeroUI v3.2.6 (e385ac2), Apache-2.0. Native preview content is a reference, not an embedded Native runtime.import { QrCode } from "@gravity-ui/icons";import { Button, Disclosure } from "@lenso/ui";import { Icon } from "@iconify/react";import { useState } from "react";import * as stylex from "@stylexjs/stylex";import { nativeReferenceStyles as styles } from "./native-reference.stylex";export function PreviewDisclosure({ composed = false }: { composed?: boolean }) {  const [open, setOpen] = useState(true);  return (    <div {...stylex.props(styles.root)}>      <Disclosure        open={open}        onOpenChange={setOpen}        render={composed ? <div data-custom="foo" /> : undefined}      >        <Disclosure.Heading>          <Disclosure.Trigger render={<Button variant="secondary" />}>            <Button.Icon>              <QrCode />            </Button.Icon>            Preview HeroUI Native            <Disclosure.Indicator />          </Disclosure.Trigger>        </Disclosure.Heading>        <Disclosure.Content          render={composed ? (props) => <div {...props} data-custom="bar" /> : undefined}        >          <Disclosure.Body xstyle={styles.body}>            <p {...stylex.props(styles.muted)}>              Scan this QR code with your camera app to preview the HeroUI native components.            </p>            <img              alt="Expo Go QR Code"              src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"              {...stylex.props(styles.qr)}            />            <p {...stylex.props(styles.muted)}>Expo must be installed on your device.</p>            <Button variant="primary" xstyle={styles.action}>              <Button.Icon>                <Icon icon="tabler:brand-apple-filled" />              </Button.Icon>              Download on App Store            </Button>          </Disclosure.Body>        </Disclosure.Content>      </Disclosure>    </div>  );}export function RenderFunction() {  return <PreviewDisclosure composed />;}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { ShoppingBag } from "@gravity-ui/icons";import { Button, Disclosure } from "@lenso/ui";import { useState } from "react";import * as stylex from "@stylexjs/stylex";import { styles } from "./source.stylex";export function CustomStyles() {  const [open, setOpen] = useState(false);  return (    <div {...stylex.props(styles.root)}>      <Disclosure open={open} onOpenChange={setOpen}>        <Disclosure.Heading>          <Disclosure.Trigger render={<Button variant="ghost" xstyle={styles.trigger} />}>            <span {...stylex.props(styles.label)}>              <ShoppingBag {...stylex.props(styles.icon)} />              Shipping details            </span>            <Disclosure.Indicator xstyle={styles.indicator} />          </Disclosure.Trigger>        </Disclosure.Heading>        <Disclosure.Content>          <Disclosure.Body xstyle={styles.body}>            Orders ship within 2 business days. Standard delivery takes 3–5 days; express is            available at checkout.          </Disclosure.Body>        </Disclosure.Content>      </Disclosure>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Disclosure component classes, you can use the @layer components directive. Learn more.

@layer components {  .disclosure {    @apply relative;  }
  .disclosure__trigger {    @apply cursor-pointer;  }
  .disclosure__indicator {    @apply transition-transform duration-300;  }
  .disclosure__content {    @apply overflow-hidden transition-all;  }}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Disclosure component uses these CSS classes (View source styles):

Base Classes [!toc]

  • .disclosure - Base container styles
  • .disclosure__heading - Heading wrapper
  • .disclosure__trigger - Trigger button styles
  • .disclosure__indicator - Chevron indicator styles
  • .disclosure__content - Content container with animations

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

  • Expanded: [data-expanded="true"] on indicator for rotation
  • Focus: :focus-visible or [data-focus-visible="true"] on trigger
  • Disabled: :disabled or [aria-disabled="true"] on trigger
  • Hidden: [aria-hidden="false"] on content for visibility

API Reference

Disclosure

PropTypeDefaultDescription
isExpandedbooleanfalseControls the expanded state
onExpandedChange(isExpanded: boolean) => void-Callback when expanded state changes
isDisabledbooleanfalseWhether the disclosure is disabled
childrenReactNode | RenderFunction-Content to render
classNamestring-Additional CSS classes
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, DisclosureRenderProps>-Overrides the default DOM element with a custom render function.

DisclosureTrigger

PropTypeDefaultDescription
childrenReactNode | RenderFunction-Trigger content
classNamestring-Additional CSS classes

DisclosureContent

PropTypeDefaultDescription
childrenReactNode-Content to show/hide
classNamestring-Additional CSS classes
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, DisclosureContentRenderProps>-Overrides the default DOM element with a custom render function.

Render Props

When using the render prop pattern, these values are provided:

PropTypeDescription
isExpandedbooleanCurrent expanded state
isDisabledbooleanWhether disclosure is disabled

See upstream Disclosure showcases. Product showcases are not part of the local component runtime.

Accordion

A collapsible content panel for organizing information in a compact space

DisclosureGroup

Container that manages multiple Disclosure items with coordinated expanded states

Button

A clickable button component with multiple variants and states