Accordion

An accordion is an interactive heading that reveals an associated section of content when clicked. It can be grouped together with multiple accordions using the AccordionGroup component.

Props

Name	Default	Type
`open`	—	`boolean` Controls whether the accordion is open from the outside
`label`	—	`string` If provided, the accordion will display the text in the header
`card`	—	`boolean` If set as true, the accordion will look like the card component
`unstyled`	`false`	`boolean` Removes default styling and allows fully custom trigger/content styling

Events

Name	Payload	Type
`open`	—	Called whenever the accordion opens
`close`	—	Called when the accordion closes

Slots

Name	Accepts	Description
`default`	`any`	The content inside the accordion
`trigger`	`any`	Allows user to define custom header which opens the accordion when clicked. It will replace the `label` prop if provided. This slot also exposes all the properties defined in the Exposes section

Exposes

When queries via useTemplateRef, this component exposes

Name	Type	Usage
`open`	`method`	When called, the accordion will open
`close`	`method`	When called, the accordion will close
`toggle`	`method`	Toggles between opened and closed state
`isOpen`	`Ref<boolean`	Ref which tracks whether the boolean is open or not

Examples

The following example shows the implementation of an unstyled element with a custom header.