Collapsible
Collapsible components allow users to toggle the visibility of content sections, providing a simple way to show or hide information on demand.
import {Collapsible} from "@qualcomm-ui/react/collapsible"Examples
Showcase
Basic collapsible component with a trigger button that expands and collapses content. The trigger uses the render prop to render as another component like our Button.
Content
import type {ReactElement} from "react"
import {Button} from "@qualcomm-ui/react/button"
import {Collapsible} from "@qualcomm-ui/react/collapsible"
export function CollapsibleShowcaseDemo(): ReactElement {
return (
<Collapsible.Root className="flex flex-col items-center">
<Collapsible.Trigger
className="my-3"
render={<Button emphasis="primary" />}
>
Toggle
</Collapsible.Trigger>
<Collapsible.Content>
<div className="border-neutral-01 box-border flex h-48 w-72 flex-col rounded-sm border p-4">
Content
</div>
</Collapsible.Content>
</Collapsible.Root>
)
}Controlled State
Control the collapsible's open/closed state using the open and onOpenChange props. This example demonstrates programmatic control with a close button inside the content.
Content
import {type ReactElement, useState} from "react"
import {Button} from "@qualcomm-ui/react/button"
import {Collapsible} from "@qualcomm-ui/react/collapsible"
export function CollapsibleControlledStateDemo(): ReactElement {
const [open, setOpen] = useState<boolean>(false)
return (
<Collapsible.Root
className="flex flex-col items-center"
onOpenChange={setOpen}
open={open}
>
<Collapsible.Trigger
className="my-3"
render={<Button emphasis="primary" />}
>
Toggle
</Collapsible.Trigger>
<Collapsible.Content>
<div className="border-neutral-01 box-border grid h-48 w-72 gap-4 rounded-sm border p-4">
Content
<Button onClick={() => setOpen(false)}>Close</Button>
</div>
</Collapsible.Content>
</Collapsible.Root>
)
}Explorer
API
<Collapsible.Root>
Type
booleanDescription
The initial open state of the collapsible when rendered.
Use when you don't need to control the open state of the collapsible.
Type
'ltr' | 'rtl'
Description
The document's text/writing direction.
Type
booleanDescription
Whether the collapsible is disabled.
Type
() =>
| Node
| ShadowRoot
| Document
Description
A root node to correctly resolve document in custom environments. i.e.,
Iframes, Electron.
Type
() => void
Description
The callback invoked when the exit animation completes.
Type
(
open: boolean,
) => void
Description
Function invoked when the collapsible opens or closes
- open:The next value.
Type
booleanDescription
The controlled open state of the collapsible
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-collapsible-partValue
'root'data-stateValue
| 'open'
| 'closed'
| 'closing'
<Collapsible.Trigger>
A button that opens and closes the collapsible content panel. Renders a
<button> element by default.Type
stringDescription
id attribute. If
omitted, a unique identifier will be automatically generated for accessibility.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-collapsible-partValue
'trigger'data-disabledValue
data-stateValue
| 'open'
| 'closed'
| 'closing'
<Collapsible.Content>
A panel with collapsible contents. Renders a
<div> element by default.Type
stringDescription
id attribute. If
omitted, a unique identifier will be automatically generated for accessibility.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-collapsible__content'data-collapsibleValue
data-collapsible-partValue
'content'data-disabledValue
data-ssrValue
data-stateValue
| 'open'
| 'closed'
| 'closing'
hiddenValue
booleanstyleValue
Last updated on by Olaf Kappes
<div>element by default.