Headless

Collapsible

A collapsible panel controlled by a button.

In Nyte

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

Import the component and assemble its parts:

Anatomy

import { Collapsible } from '@base-ui/react/collapsible';

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

Examples

Hidden until found

The hiddenUntilFound prop hides the closed panel with hidden="until-found" so the browser can search its contents with find-in-page—Ctrl+F (Cmd+F 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.

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 for an interactive demo.

API reference

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

Re-export of Root props.

Root.State

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

Root.ChangeEventReason

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

Root.ChangeEventDetails

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

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 via the `render` prop. 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 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 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 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

Re-export of Trigger props.

Trigger.State

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

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"` 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 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 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. 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 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

Re-export of Panel props.

Panel.State

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

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

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