# Collapsible

> A single disclosure: one trigger shows and hides one region.

Category: Advanced · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/collapsible

Collapsible is the primitive behind progressive disclosure, such as "Advanced settings", "Show details" or long log output. It is unstyled apart from focus, so you compose the trigger, often with Button asChild. Use Accordion for a group of related disclosures.

## Import

```tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Collapsible>
      <CollapsibleTrigger asChild>
        <Button variant="ghost" size="sm" trailingIcon={<Icon name="chevron-down" />}>
          Advanced settings
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <p style={{ margin: '12px 0 0' }}>
          Relay host, port and TLS options are managed by your IT administrator.
        </p>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

### Controlled

```tsx
import * as React from 'react';
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bindshq/stance-react';

export function Controlled() {
  const [open, setOpen] = React.useState(false);
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <strong>3 mailboxes failed</strong>
        <CollapsibleTrigger asChild>
          <Button variant="link" size="sm">
            {open ? 'Hide' : 'Show'} details
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent>
        <ul style={{ margin: '8px 0 0', paddingLeft: 20 }}>
          <li>tomas@binds.si: mailbox not found</li>
          <li>oliver@binds.si: licence missing</li>
          <li>hana@binds.si: relay timeout</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

### Preserve form state

forceMount keeps inputs mounted while hidden.

```tsx
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@bindshq/stance-react';

export function ForceMount() {
  return (
    <Collapsible defaultOpen>
      <CollapsibleTrigger asChild>
        <Button variant="outline" size="sm">
          Toggle optional fields
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent forceMount>
        <label style={{ display: 'grid', gap: 4, marginTop: 12, maxWidth: 280 }}>
          Mobile number
          <input placeholder="+44 7700 900123" />
        </label>
      </CollapsibleContent>
    </Collapsible>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Collapsible | `open` | `boolean` | None | Controlled state. |
| Collapsible | `defaultOpen` | `boolean` | `false` | Initial state. |
| Collapsible | `onOpenChange` | `(open: boolean) => void` | None | Called on toggle. |
| Collapsible | `disabled` | `boolean` | `false` | Prevent toggling. |
| Collapsible | `asChild` | `boolean` | `false` | Render as the child element. |
| CollapsibleTrigger | `asChild` | `boolean` | `false` | Use your own button element. |
| CollapsibleContent | `forceMount` | `boolean` | `false` | Keep mounted (hidden) while closed. |

## Accessibility

- The trigger is a button with aria-expanded and aria-controls pointing to the content.
- Closed content is removed, or hidden with the hidden attribute when forceMount is set.
- Make the trigger text describe what it reveals, e.g. "Show 3 failed mailboxes".

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` `Space` | Toggles the content. |

## Guidelines

**Do**

- Keep the trigger next to the content it controls.

**Don’t**

- Use for navigation menus; use NavigationMenu.

## Related

- https://stanceui.com/components/accordion