Disclosure

Import

import {Disclosure} from '@heroui/react';

Usage

Scan this QR code with your camera app to preview the HeroUI native components.

Expo must be installed on your device.

"use client";

import {Button, Disclosure} from "@heroui/react";
import {Icon} from "@iconify/react";
import React from "react";

export function Basic() {
  const [isExpanded, setIsExpanded] = React.useState(true);

  return (
    <div className="w-full max-w-md text-center">
      <Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
        <Disclosure.Heading>
          <Button slot="trigger" variant="secondary">
            <Icon icon="gravity-ui:qr-code" />
            Preview HeroUI Native
            <Disclosure.Indicator />
          </Button>
        </Disclosure.Heading>
        <Disclosure.Content>
          <Disclosure.Body className="bg-panel shadow-border rounded-panel mx-2 mb-2 mt-4 flex flex-col items-center p-1 p-4 text-center">
            <p className="text-muted text-sm">
              Scan this QR code with your camera app to preview the HeroUI native components.
            </p>
            <img
              alt="Expo Go QR Code"
              className="max-w-54 my-2 aspect-square w-full object-cover"
              src="https://raw.githubusercontent.com/heroui-inc/heroui-native/refs/heads/alpha/expo-go-qr.png"
            />
            <p className="text-muted text-sm">Expo must be installed on your device.</p>
            <Button className="mt-4" variant="primary">
              <Icon icon="tabler:brand-apple-filled" />
              Download on App Store
            </Button>
          </Disclosure.Body>
        </Disclosure.Content>
      </Disclosure>
    </div>
  );
}

Anatomy

Import all parts and piece them together.

import { Disclosure } from '@heroui/react';

export default () => (
  <Disclosure>
    <Disclosure.Heading>
      <Disclosure.Trigger>
        <Disclosure.Indicator />
      </Disclosure.Trigger>
    </Disclosure.Heading>
    <Disclosure.Content/>
  </Disclosure>
)

Styling

Passing Tailwind CSS classes

import { Disclosure } from '@heroui/react';

function CustomDisclosure() {
  return (
    <Disclosure className="border rounded-lg p-4">
      <Disclosure.Trigger className="text-lg font-semibold">
        Click to expand
        <Disclosure.Indicator className="ml-2" />
      </Disclosure.Trigger>
      <Disclosure.Content className="mt-4 text-gray-600">
        Hidden content
      </Disclosure.Content>
    </Disclosure>
  );
}

Customizing the component classes

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;
  }
}

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

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

Prop	Type	Default	Description
`isExpanded`	`boolean`	`false`	Controls the expanded state
`onExpandedChange`	`(isExpanded: boolean) => void`	-	Callback when expanded state changes
`isDisabled`	`boolean`	`false`	Whether the disclosure is disabled
`children`	`ReactNode \| RenderFunction`	-	Content to render
`className`	`string`	-	Additional CSS classes

Disclosure.Trigger Props

Prop	Type	Default	Description
`children`	`ReactNode \| RenderFunction`	-	Trigger content
`className`	`string`	-	Additional CSS classes
`slot`	`string`	`"trigger"`	Slot name for React Aria

Disclosure.Content Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content to show/hide
`className`	`string`	-	Additional CSS classes

Disclosure.Indicator Props

Prop	Type	Default	Description
`children`	`ReactElement`	`<IconChevronDown />`	Custom indicator element
`className`	`string`	-	Additional CSS classes

RenderProps

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

Prop	Type	Description
`isExpanded`	`boolean`	Current expanded state
`isDisabled`	`boolean`	Whether disclosure is disabled

Preview HeroUI Native

On this page