CollapsibleGroup

A Component that groups Collapsible components. It is a container that separates its children with an <hr> element. You may want to check the Collapsible Documentation before using the CollapsibleGroup component.

Usage

import { CollapsibleGroup, useCollapsibleState } from '@vtex/admin-ui'

function Example() {
  const state = useCollapsibleState()

  return (
    <CollapsibleGroup csx={{ width: 400 }}>
      <Collapsible state={steate}>
        <CollapsibleHeader label="Example" />
        <CollapsibleContent>
          <Text variant="action">Lorem ipsum.</Text>
        </CollapsibleContent>
      </Collapsible>
    </CollapsibleGroup>
  )
}

Behavior

ReferenceError: useCollapsibleState is not defined

Variation

Nested

It is possible to render a CollapsibleGroup inside a Collapsible, just pass the CollapsibleGroup as a child of CollapsibleContent. Note that when nesting, each internal collapsible will have different padding from the one on the root. Check Nested Collapsible Documentation for detailed info.

ReferenceError: useCollapsibleState is not defined

Props

Same as Box.