# Collapsible (/cloud/headless/collapsible)



{/* Generated by scripts/sync-base-ui-reference.mjs. Edit the script, not this file. */}

## In Nyte [#in-nyte]

```ts title="Import"
import { Collapsible } from "@nyte-ai/ui/collapsible";
```

`@nyte-ai/ui/collapsible` re-exports the Base UI namespace unchanged. There is no Nyte styling on
this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the
interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

* `desktop/src/renderer/src/chrome/models-settings.tsx`
* `desktop/src/renderer/src/chrome/sidebar.tsx`
* `desktop/src/renderer/src/conversation/tool-call.tsx`
* `desktop/src/renderer/src/conversation/tool-group.tsx`
* `desktop/src/renderer/src/conversation/turn-view.tsx`

The rest of this page is Base UI's documentation for `@base-ui/react/collapsible`, reproduced
verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI
package; in Nyte, import from the subpath above.

## Anatomy [#anatomy]

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Collapsible } from '@base-ui/react/collapsible';

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Panel />
</Collapsible.Root>;
```

## Examples [#examples]

### Hidden until found [#hidden-until-found]

The `hiddenUntilFound` prop hides the closed panel with [`hidden="until-found"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden) so the browser can search its contents with find-in-page—<kbd>Ctrl</kbd>+<kbd>F</kbd> (<kbd>Cmd</kbd>+<kbd>F</kbd> on macOS)—and reveal the panel when a match is found. The closed panel always remains mounted in the DOM, which also makes its contents indexable by search engines.

Older browsers that don't support `hidden="until-found"` keep the panel hidden until its trigger opens it, and find-in-page skips over the contents.

```tsx title="Searchable hidden panel"
<Collapsible.Root>
  <Collapsible.Trigger>Shipping details</Collapsible.Trigger>
  {/* @highlight-text "hiddenUntilFound" */}
  <Collapsible.Panel hiddenUntilFound>Standard shipping takes 3–5 business days.</Collapsible.Panel>
</Collapsible.Root>
```

See the [Accordion example](/react/components/accordion#hidden-until-found) for an interactive demo.

## API reference [#api-reference]

### Root [#root]

Groups all parts of the collapsible.
Renders a `<div>` element.

**Root Props:**

| Prop         | Type                                                                                           | Default | Description                                                                                                                                                                                   |
| :----------- | :--------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen  | `boolean`                                                                                      | `false` | Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.                                                                             |
| open         | `boolean`                                                                                      | -       | Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.                                                                   |
| onOpenChange | `((open: boolean, eventDetails: Collapsible.Root.ChangeEventDetails) => void)`                 | -       | Event handler called when the panel is opened or closed.                                                                                                                                      |
| disabled     | `boolean`                                                                                      | `false` | Whether the component should ignore user interaction.                                                                                                                                         |
| className    | `string \| ((state: Collapsible.Root.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style        | `React.CSSProperties \| ((state: Collapsible.Root.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render       | `ReactElement \| ((props: HTMLProps, state: Collapsible.Root.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**Root Data Attributes:**

| Attribute           | Type | Description                                       |
| :------------------ | :--- | :------------------------------------------------ |
| data-open           | -    | Present when the collapsible is open.             |
| data-closed         | -    | Present when the collapsible is closed.           |
| data-starting-style | -    | Present when the collapsible begins animating in. |
| data-ending-style   | -    | Present when the collapsible is animating out.    |

### Root.Props [#rootprops]

Re-export of [Root](#root) props.

### Root.State [#rootstate]

```typescript
type CollapsibleRootState = {
  /** Whether the collapsible panel is currently open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  transitionStatus: TransitionStatus;
};
```

### Root.ChangeEventReason [#rootchangeeventreason]

```typescript
type CollapsibleRootChangeEventReason = 'trigger-press' | 'none';
```

### Root.ChangeEventDetails [#rootchangeeventdetails]

```typescript
type CollapsibleRootChangeEventDetails = (
  | { reason: 'trigger-press'; event: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
};
```

### Trigger [#trigger]

A button that opens and closes the collapsible panel.
Renders a `<button>` element.

**Trigger Props:**

| Prop         | Type                                                                                              | Default | Description                                                                                                                                                                                   |
| :----------- | :------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nativeButton | `boolean`                                                                                         | `true`  | Whether the component renders a native `<button>` element when replacing it&#xA;via the `render` prop.&#xA;Set to `false` if the rendered element is not a button (for example, `<div>`).     |
| className    | `string \| ((state: Collapsible.Trigger.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style        | `React.CSSProperties \| ((state: Collapsible.Trigger.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render       | `ReactElement \| ((props: HTMLProps, state: Collapsible.Trigger.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**Trigger Data Attributes:**

| Attribute       | Type | Description                                 |
| :-------------- | :--- | :------------------------------------------ |
| data-panel-open | -    | Present when the collapsible panel is open. |

### Trigger.Props [#triggerprops]

Re-export of [Trigger](#trigger) props.

### Trigger.State [#triggerstate]

```typescript
type CollapsibleTriggerState = {
  /** Whether the collapsible panel is currently open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  transitionStatus: TransitionStatus;
};
```

### Panel [#panel]

A panel with the collapsible contents.
Renders a `<div>` element.

**Panel Props:**

| Prop             | Type                                                                                            | Default | Description                                                                                                                                                                                                 |
| :--------------- | :---------------------------------------------------------------------------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| hiddenUntilFound | `boolean`                                                                                       | `false` | Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"`&#xA;to hide the element without removing it from the DOM. |
| className        | `string \| ((state: Collapsible.Panel.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                                    |
| style            | `React.CSSProperties \| ((state: Collapsible.Panel.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                                 |
| keepMounted      | `boolean`                                                                                       | `false` | Whether to keep the element in the DOM while the panel is hidden.&#xA;This prop is ignored when `hiddenUntilFound` is used.                                                                                 |
| render           | `ReactElement \| ((props: HTMLProps, state: Collapsible.Panel.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.               |

**Panel Data Attributes:**

| Attribute           | Type | Description                                   |
| :------------------ | :--- | :-------------------------------------------- |
| data-open           | -    | Present when the collapsible panel is open.   |
| data-closed         | -    | Present when the collapsible panel is closed. |
| data-starting-style | -    | Present when the panel begins animating in.   |
| data-ending-style   | -    | Present when the panel is animating out.      |

**Panel CSS Variables:**

| Variable                     | Type     | Description                     |
| :--------------------------- | :------- | :------------------------------ |
| `--collapsible-panel-height` | `number` | The collapsible panel's height. |
| `--collapsible-panel-width`  | `number` | The collapsible panel's width.  |

### Panel.Props [#panelprops]

Re-export of [Panel](#panel) props.

### Panel.State [#panelstate]

```typescript
type CollapsiblePanelState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** Whether the collapsible panel is currently open. */
  open: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
};
```

## Export Groups [#export-groups]

* `Collapsible.Root`: `Collapsible.Root`, `Collapsible.Root.State`, `Collapsible.Root.Props`, `Collapsible.Root.ChangeEventReason`, `Collapsible.Root.ChangeEventDetails`
* `Collapsible.Trigger`: `Collapsible.Trigger`, `Collapsible.Trigger.State`, `Collapsible.Trigger.Props`
* `Collapsible.Panel`: `Collapsible.Panel`, `Collapsible.Panel.State`, `Collapsible.Panel.Props`
* `Default`: `CollapsibleRootState`, `CollapsibleRootProps`, `CollapsibleRootChangeEventReason`, `CollapsibleRootChangeEventDetails`, `CollapsibleTriggerState`, `CollapsibleTriggerProps`, `CollapsiblePanelState`, `CollapsiblePanelProps`

## Canonical Types [#canonical-types]

Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias.

* `Collapsible.Root.State`: `CollapsibleRootState`
* `Collapsible.Root.Props`: `CollapsibleRootProps`
* `Collapsible.Root.ChangeEventReason`: `CollapsibleRootChangeEventReason`
* `Collapsible.Root.ChangeEventDetails`: `CollapsibleRootChangeEventDetails`
* `Collapsible.Trigger.State`: `CollapsibleTriggerState`
* `Collapsible.Trigger.Props`: `CollapsibleTriggerProps`
* `Collapsible.Panel.State`: `CollapsiblePanelState`
* `Collapsible.Panel.Props`: `CollapsiblePanelProps`