Collapsible
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.
Qualcomm
Content
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.
Qualcomm
Content
API
<Collapsible.Root>
| Prop | Type | Default |
|---|---|---|
The initial open state of the collapsible when rendered.
Use when you don't need to control the open state of the collapsible. | boolean | false |
The document's text/writing direction. | 'ltr' | 'rtl' | 'ltr' |
Whether the collapsible is disabled. | boolean | |
A root node to correctly resolve document in custom environments. i.e.,
Iframes, Electron. | () => | |
The callback invoked when the exit animation completes. | () => void | |
Function invoked when the collapsible opens or closes
| ( | |
The controlled open state of the collapsible | boolean | |
Allows you to replace the component's HTML element with a different tag or component. Learn more | | ReactElement |
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
- openThe 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
| Attribute / Property | Value |
|---|---|
data-part | 'root' |
data-scope | 'collapsible' |
data-state | | 'open' |
data-partValue
'root'data-scopeValue
'collapsible'data-stateValue
| 'open'
| 'closed'
| 'closing'
<Collapsible.Trigger>
A button that opens and closes the collapsible content panel. Renders a
<button> element by default.| Prop | Type |
|---|---|
id attribute. If
omitted, a unique identifier will be automatically generated for accessibility. | string |
Allows you to replace the component's HTML element with a different tag or component. Learn more | | ReactElement |
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
| Attribute / Property | Value |
|---|---|
data-disabled | |
data-part | 'trigger' |
data-scope | 'collapsible' |
data-state | | 'open' |
data-disabledValue
data-partValue
'trigger'data-scopeValue
'collapsible'data-stateValue
| 'open'
| 'closed'
| 'closing'
<Collapsible.Content>
A panel with collapsible contents. Renders a
<div> element by default.| Prop | Type |
|---|---|
id attribute. If
omitted, a unique identifier will be automatically generated for accessibility. | string |
Allows you to replace the component's HTML element with a different tag or component. Learn more | | ReactElement |
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
| Attribute / Property | Value |
|---|---|
className | 'qui-collapsible__content' |
data-collapsible | |
data-disabled | |
data-part | 'content' |
data-scope | 'collapsible' |
data-ssr | |
data-state | | 'open' |
hidden | boolean |
style |
classNameValue
'qui-collapsible__content'data-collapsibleValue
data-disabledValue
data-partValue
'content'data-scopeValue
'collapsible'data-ssrValue
data-stateValue
| 'open'
| 'closed'
| 'closing'
hiddenValue
booleanstyleValue
<div>element by default.