Collapsible

A Collapsible component is a container that allows toggling the display of its content.

Usage

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

function Example() {
  const state = useCollapsibleState()

  return (s
    <Collapsible state={state} csx={{ width: 500 }}>
      <CollapsibleHeader label="Build for Community" />
      <CollapsibleContent>
        It’s all about being ready to grow and reach new levels. Have a solid
        foundation, modular thinking and flexible essence.
      </CollapsibleContent>
    </Collapsible>
  )
}

Behavior

When using Collapsible you should always use its composites: CollapsibleHeader and CollapsibleContent

Loading...

State

For convenience, we provide a hook that already implements the state logic for you. It can be very handy if you have a group of collapsible and want to handle the states of each one. You should pass the hook return to the state property.

Loading...

Variation

Actions Panel

You can render a set of actions on the right side of the collapsible's header. Just pass the buttons to the CollapsibleHeader children.

Loading...

Initially Visible

You can set the CollapsibleContent to be initially visible. Just define the property visible to be true, in the useCollapsibleState hook.

Loading...

Nested

It is possible to render a Collapsible inside another, just pass the Collapsible as a child of CollapsibleContent. Note that each nested collapsible has different padding than the one at the root, this is a design requirement, each internal collapsible must have a 16px padding, while the one in the root has a 24px padding.

Loading...

Composites

The Collapsible component uses two composites, CollapsibleHeader and CollapsibleContent.

Header

As the title says, it represents the header of the collapsible. It renders a <header> and is always visible.

Disclosure Button

It represents the button that controls the content visibility and is always located on the left side of the header. Collapsible's label property defines the disclosure button label.

Actions Panel

It represents a set of buttons and is always located on the right side of the header. You should pass this set of buttons to the CollapsibleHeader children, to this panel to be rendered.

Content

As the name already says, it represents the content of the collapsible. It renders a <section> and can be hidden or visible.

Props

Name	Type	Description	Required	Default
state	State	Component state, useCollapsibleState's return	✅	-
csx	StyleObject	Custom styles	🚫	{}
disabled	boolean	Same as the HTML attribute	🚫	false
children	ReactNode	Collapsible children	🚫	-

CollapsibleHeader Props

Name	Type	Description	Required	Default
csx	StyleObject	Custom styles	🚫	{}
label	ReactNode	Toggle button label	🚫	-
children	ReactNode	CollapsibleHeader children	🚫	-

CollapsibleContent Props

Name	Type	Description	Required	Default
csx	StyleObject	Custom styles	🚫	{}
children	ReactNode	CollapsibleContent children	🚫	-

State

Name	Type	Description	Default
visible	boolean	Whether the content is visible or not	-
toggle	() => void	Toggles the visible state	-

useCollapsibleState params

Name	Type	Description	Required	Default
visible	boolean	Whether it is visible by default	🚫	false