Skip to content
comp0

comp0

Navigation

Disclosure

One button that shows or hides its own extra content.

When to use it: Use it for one small optional detail.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Source files, updates, and email support.
Disclosure.tsxtsx
import { Disclosure, DisclosurePanel, DisclosureTrigger } from "@comp0/react";
import { ChevronDownIcon } from "@heroicons/react/16/solid";

export function Example() {
  return (
    <Disclosure className="flex max-w-xs flex-col gap-2 rounded border border-zinc-950/10 p-3 dark:border-white/10">
      <DisclosureTrigger className="group flex cursor-pointer list-none items-center justify-between gap-2 text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100 [&::-webkit-details-marker]:hidden">
        What is included?
        <ChevronDownIcon
          className="size-4 text-zinc-400 transition-transform duration-150 ease-out group-data-open:rotate-180 motion-reduce:transition-none"
          aria-hidden="true"
        />
      </DisclosureTrigger>
      <DisclosurePanel className="text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
        Source files, updates, and email support.
      </DisclosurePanel>
    </Disclosure>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Disclosure

    Open-state provider. Does not add a DOM element.

  2. DisclosureTrigger

    Native summary element that toggles the details. Owns a DOM element.

  3. DisclosurePanel

    Revealed content. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start Disclosure with DisclosureTrigger.

  2. 2

    Add the supporting parts

    Put DisclosurePanel immediately after the trigger.

  3. 3

    Make the behavior clear

    Use defaultOpen when the detail should start visible.

    Exampletsx
    <Disclosure><DisclosureTrigger>Details</DisclosureTrigger><DisclosurePanel>More information.</DisclosurePanel></Disclosure>

Keyboard

↵
Toggles the panel.
Space
Toggles the panel.

Forms and accessibility

No native form behavior.

Accessibility checklist

  • Use trigger text that says what will appear.
  • Keep open and closed state visible.
  • Do not put a nested interactive control inside the trigger.

API reference

Importtsx
import { Disclosure, DisclosurePanel, DisclosureTrigger } from "@comp0/react";

Disclosure

Context only

Open-state provider.

PropTypeDescription
open / defaultOpenbooleanControlled or initial open state.
onChange(open: boolean) => voidReceives the next open state.

DisclosureTrigger

DOM element

Native summary element that toggles the details.

DisclosurePanel

DOM element

Revealed content.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-open]

on Disclosure, DisclosureTrigger, DisclosurePanel

The disclosure is open.
:open

on Disclosure

Native details pseudo-class equivalent.

Keep exploring