---
title: "Disclosure"
description: "A section that folds away, with a hint of what is inside while closed. Use it for the optional part of a form or advanced settings; stack several in a DisclosureGroup for an accordion. Leave out the title to draw your own trigger."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Disclosure

## Optional fields

```tsx
import { Disclosure } from '@arbol-ai/ui';

<Disclosure className="max-w-sm" hint="Email, priority, notes" title="More details (optional)">
  <div className="flex flex-col gap-2 text-sm">
    <label className="flex flex-col gap-1">
      Email
      <input className="rounded-field h-8 border px-2" type="email" />
    </label>
    <label className="flex flex-col gap-1">
      Notes
      <textarea className="rounded-field border p-2" />
    </label>
  </div>
</Disclosure>
```

## Accordion

One section open at a time; allowsMultipleExpanded lets several stay open.

```tsx
import { Disclosure, DisclosureGroup } from '@arbol-ai/ui';

<DisclosureGroup className="max-w-sm" defaultExpandedKeys={['hours']}>
  <Disclosure id="hours" title="Opening hours">
    <p className="text-sm">Monday to Friday, 7:00 to 19:00. Saturdays until 13:00.</p>
  </Disclosure>
  <Disclosure hint="3 days" id="holidays" title="Holidays">
    <p className="text-sm">December 25, January 1 and May 1: closed.</p>
  </Disclosure>
  <Disclosure id="reminders" title="Reminders">
    <p className="text-sm">A WhatsApp message the day before each appointment.</p>
  </Disclosure>
</DisclosureGroup>
```

## Your own trigger

Without a title, DisclosureTrigger holds whatever the head shows and DisclosureCaret turns as it opens; CollapsibleCard is this, ready made.

```tsx
import { SlidersHorizontalIcon } from '@phosphor-icons/react';
import { Disclosure, DisclosureCaret, DisclosurePanel, DisclosureTrigger } from '@arbol-ai/ui';

<Disclosure className="rounded-card bg-card max-w-sm border">
  <DisclosureTrigger className="data-hovered:bg-gray-a1 rounded-card flex w-full items-center gap-3 p-4 text-start">
    <SlidersHorizontalIcon aria-hidden className="text-muted-foreground size-5" />
    <span className="min-w-0 flex-1">
      <span className="block text-sm font-medium">Advanced settings</span>
      <span className="text-muted-foreground block text-xs">Line, retries and call limits</span>
    </span>
    <DisclosureCaret className="size-4" />
  </DisclosureTrigger>
  <DisclosurePanel className="space-y-2 px-4 pb-4 text-sm">
    <p>Calls from the clinic’s main line.</p>
    <p>Two retries, an hour apart.</p>
  </DisclosurePanel>
</Disclosure>
```

## Text toggle

The trigger’s children may be a function of isExpanded, for words that change as it opens.

```tsx
import { Disclosure, DisclosureCaret, DisclosurePanel, DisclosureTrigger } from '@arbol-ai/ui';

<Disclosure className="max-w-sm">
  <DisclosureTrigger className="text-muted-foreground data-hovered:text-foreground inline-flex items-center gap-1.5 text-sm font-medium">
    {({ isExpanded }) => (
      <>
        {isExpanded ? 'Hide advanced options' : 'Show advanced options'}
        <DisclosureCaret />
      </>
    )}
  </DisclosureTrigger>
  <DisclosurePanel className="pt-3 text-sm">Two retries, an hour apart.</DisclosurePanel>
</Disclosure>
```

## Source

The examples above are [`src/components/disclosure/disclosure.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/disclosure/disclosure.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/layout/disclosure/index.mdx