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.

Brand

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

Brand

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 grid h-48 w-72 gap-4 rounded-sm border p-4">
          Content
          <Button onClick={() => setOpen(false)}>Close</Button>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}

API

<Collapsible.Root>

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

Prop	Type	Default
children React children prop.	ReactNode
defaultOpen 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
dir The document's text/writing direction.	'ltr' \| 'rtl'	'ltr'
disabled Whether the collapsible is disabled.	boolean
getRootNode A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
onExitComplete The callback invoked when the exit animation completes.	() => void
onOpenChange Function invoked when the collapsible opens or closes open:The next value.	( open: boolean, ) => void
open The controlled open state of the collapsible	boolean
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

defaultOpen

Type

boolean

Description

The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Whether the collapsible is disabled.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve document in custom environments. i.e., Iframes, Electron.

onExitComplete

Type

() => void

Description

The callback invoked when the exit animation completes.

onOpenChange

Type

(
  open: boolean,
) => void

Description

Function invoked when the collapsible opens or closes

open:The next value.

open

Type

boolean

Description

The controlled open state of the collapsible

render

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' \| 'closed' \| 'closing'

<Collapsible.Trigger>

A button that opens and closes the collapsible content panel. Renders a <button> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

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' \| 'closed' \| 'closing'

data-disabled

Value

data-part

Value

'trigger'

data-scope

Value

'collapsible'

data-state

Value

| 'open'
| 'closed'
| 'closing'

<Collapsible.Content>

A panel with collapsible contents. Renders a <div> element by default.

Prop	Type
children React children prop.	ReactNode
id id attribute. If omitted, a unique identifier will be automatically generated for accessibility.	string
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

Type

string

Description

id attribute. If omitted, a unique identifier will be automatically generated for accessibility.

render

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' \| 'closed' \| 'closing'
`hidden`	boolean
`style`	CSSProperties

className

Value

'qui-collapsible__content'

data-collapsible

Value

data-disabled

Value

data-part

Value

'content'

data-scope

Value

'collapsible'

data-ssr

Value

data-state

Value

| 'open'
| 'closed'
| 'closing'

hidden

Value

boolean

style

Value

CSSProperties

Breadcrumbs

Pagination