This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Collapsible

Version: 0.134.0

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.

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​

NameTypeDescriptionRequiredDefault
stateStateComponent state, useCollapsibleState's returnβœ…-
csxStyleObjectCustom styles🚫{}
disabledbooleanSame as the HTML attribute🚫false
childrenReactNodeCollapsible children🚫-

CollapsibleHeader Props​

NameTypeDescriptionRequiredDefault
csxStyleObjectCustom styles🚫{}
labelReactNodeToggle button label🚫-
childrenReactNodeCollapsibleHeader children🚫-

CollapsibleContent Props​

NameTypeDescriptionRequiredDefault
csxStyleObjectCustom styles🚫{}
childrenReactNodeCollapsibleContent children🚫-

State​

NameTypeDescriptionDefault
visiblebooleanWhether the content is visible or not-
toggle() => voidToggles the visible state-

useCollapsibleState params​

NameTypeDescriptionRequiredDefault
visiblebooleanWhether it is visible by default🚫false