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

Loading...

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.

Loading...

Props

Same as Box.