Components

Collapsible

A panel that a button opens and closes

import { Collapsible } from "@nyte-ai/ui/collapsible";

One trigger, one panel. Reach for it when a section of a surface is worth hiding until the reader asks for it. No Nyte styling here.

Usage

defaultOpen leaves the panel uncontrolled. open with onOpenChange controls it.
The closed panel unmounts unless you pass keepMounted or hiddenUntilFound.
Animate the panel from --collapsible-panel-height and --collapsible-panel-width, which the panel publishes while it transitions.
disabled on the root stops the trigger from opening the panel.

Anatomy

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

Examples

Basic

<Collapsible.Root>
  <Collapsible.Trigger>
    <IconChevronRightSmall size={12} />
    Advanced settings
  </Collapsible.Trigger>
  <Collapsible.Panel>
    <div>Tools run without a confirmation prompt while this session is trusted.</div>
  </Collapsible.Panel>
</Collapsible.Root>

Controlled

const [open, setOpen] = useState(false);

<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
  <Collapsible.Panel>
    <div>Tools run without a confirmation prompt while this session is trusted.</div>
  </Collapsible.Panel>
</Collapsible.Root>;

Hidden until found

hiddenUntilFound hides the closed panel with hidden="until-found", so find-in-page can match its contents and open it. The panel stays in the DOM, which also makes it indexable. Browsers without support for hidden="until-found" keep the panel hidden until the trigger opens it, and find-in-page skips it.

<Collapsible.Root>
  <Collapsible.Trigger>Environment variables</Collapsible.Trigger>
  <Collapsible.Panel hiddenUntilFound>NYTE_BIN_DIR, NYTE_INSTALL_DIR</Collapsible.Panel>
</Collapsible.Root>

Props

The reference tables below come from Base UI, MIT, © Material-UI SAS.

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.

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.

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.

Accessibility

The trigger renders a native <button> with aria-expanded, and aria-controls pointing at the panel while it is open. Enter and Space toggle it.
Rendering the trigger as something other than a <button> needs nativeButton={false}.
Open state lands on data-panel-open on the trigger, and data-open or data-closed on the root and the panel.
The focus ring is yours to draw. See Focus.