Collapsible

An interactive component which expands/collapses a panel. Based on Radix Vue.

Component Features

• 🛠️ Fully Configurable: Easily control the expanded and collapsed states.
• 📐 Multiple Sizes: Supports all standard sizes (xs, sm, md, lg, xl, 2xl, default).
• 🎨 Customizable: Replace the default icon or customize the trigger easily.
• ⌨️ Accessible: Full keyboard support and screen reader accessible out of the box.
• 🎭 Theme Customization: Fully supports global theme configuration via BrConfigProvider.

Basic Usage

The most basic collapsible usage.

Example

Sizes

You can change the size of the collapsible component using the size prop. It supports all sizes from the global configuration (xs, sm, md, lg, xl, 2xl, default).

Example

Custom Icon

Use the icon slot on BrCollapsibleTrigger to customize the expand/collapse icon.

Example

Disabled

Use the disabled prop to prevent the user from interacting with the collapsible.

Example

Theme Customization

Combined with BrConfigProvider, you can globally override the default styles of the component.

Example

API Reference

BrCollapsible

Prop	Type	Default	Description
open (v-model)	boolean	-	The controlled open state of the collapsible
defaultOpen	boolean	false	The default open state when initially rendered
disabled	boolean	false	Whether the collapsible is disabled
size	'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'default'	The size of the collapsible
lazyRender	boolean	true	Whether to defer rendering the content until opened

BrCollapsibleTrigger

Prop	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child
hideIcon	boolean	false	Hide the default chevron icon

BrCollapsibleContent

Prop	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child
forceMount	boolean	-	Used to force mounting when more control is needed