Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Basic Usage

The basic accordion mode only allows one panel to be expanded at a time. Use type="single" and collapsible to allow closing the currently open panel.

Example

Multiple Panels

Set type="multiple" to allow multiple panels to be expanded at the same time.

Example

Theming

Global Customization (BrConfigProvider) & Local Customization

You can override default CSS variables via the theme prop of BrConfigProvider, or directly override styles using TailwindCSS utility classes.

Example

API

BrAccordion Props

Name	Type	Default	Description
type	'single' | 'multiple'	'single'	Determines whether one or multiple items can be opened at the same time.
modelValue / v-model	string | string[]	-	The value of the item(s) to expand.
defaultValue	string | string[]	-	The value of the item(s) to expand by default.
collapsible	boolean	false	When type is "single", allows closing content when clicking trigger for an open item.
disabled	boolean	false	Whether the entire accordion is disabled.

BrAccordionItem Props

Name	Type	Default	Description
value	string	-	(Required) A unique value for the item.
disabled	boolean	false	Whether the item is disabled.

BrAccordionTrigger Props

Name	Type	Default	Description
icon	string | Component	-	Custom icon component to replace the default ChevronDown.
hideIcon	boolean	false	Whether to hide the right icon.

Slots

• BrAccordionTrigger supports #icon slot to customize the toggle icon.
• BrAccordionContent has a default slot for the content.