Base UI Vue

Appearance

Accordion ​

A set of collapsible panels with headings.

Anatomy ​

Import the component and assemble its parts:

vue
<script setup>
import {
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionRoot,
  AccordionTrigger,
} from 'base-ui-vue'
</script>

<template>
  <AccordionRoot>
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger />
      </AccordionHeader>
      <AccordionPanel />
    </AccordionItem>
  </AccordionRoot>
</template>

Examples ​

Open multiple panels ​

You can set up the accordion to allow multiple panels to be open at the same time using the multiple prop.

Controlled state ​

Use the value prop and value-change event for controlled behavior:

vue
<script setup>
import {
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionRoot,
  AccordionTrigger,
} from 'base-ui-vue'
import { ref } from 'vue'

const openValues = ref([])

function handleValueChange(value, details) {
  openValues.value = value
}
</script>

<template>
  <AccordionRoot :value="openValues" @value-change="handleValueChange">
    <AccordionItem value="item-1">
      <AccordionHeader>
        <AccordionTrigger>Item 1</AccordionTrigger>
      </AccordionHeader>
      <AccordionPanel>Content 1</AccordionPanel>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionHeader>
        <AccordionTrigger>Item 2</AccordionTrigger>
      </AccordionHeader>
      <AccordionPanel>Content 2</AccordionPanel>
    </AccordionItem>
  </AccordionRoot>
</template>

Animations ​

The Accordion panel can be animated using CSS transitions or CSS animations via the --accordion-panel-height and --accordion-panel-width CSS variables combined with data-starting-style and data-ending-style data attributes.

css
.Panel {
  height: var(--accordion-panel-height);
  overflow: hidden;
  transition: height 150ms ease-out;
}

.Panel[data-starting-style],
.Panel[data-ending-style] {
  height: 0;
}

API reference ​

Root ​

Groups all parts of the accordion. Renders a <div> element.

PropTypeDefaultDescription
asstring | Component'div'The element or component to use for the root node.
valueany[]undefinedThe controlled value of the item(s) that should be expanded.
default-valueany[][]The uncontrolled value of the item(s) that should be initially expanded.
disabledbooleanfalseWhether the component should ignore user interaction.
hidden-until-foundbooleanfalseAllows the browser's built-in page search to find and expand the panel contents. Overrides keep-mounted and uses hidden="until-found".
keep-mountedbooleanfalseWhether to keep the element in the DOM while the panel is closed. Ignored when hidden-until-found is used.
loop-focusbooleantrueWhether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
multiplebooleanfalseWhether multiple items can be open at the same time.
orientation'horizontal' | 'vertical''vertical'The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys.
classstring | ((state: State) => string)undefinedCSS class applied to the element, or a function that returns a class based on the component's state.
styleStyleValue | ((state: State) => StyleValue)undefinedStyle applied to the element, or a function that returns a style object based on the component's state.
EmitsTypeDescription
value-change(value: any[], details: EventDetails)Emitted when an accordion item is expanded or collapsed.
AttributeDescription
data-disabledPresent when the accordion is disabled.
data-orientationIndicates the orientation of the accordion.

Item ​

Groups an accordion header with the corresponding panel. Renders a <div> element.

PropTypeDefaultDescription
asstring | Component'div'The element or component to use for the root node.
valueanyundefinedA unique value that identifies this accordion item. If not provided, a unique ID will be generated.
disabledbooleanfalseWhether the component should ignore user interaction.
classstring | ((state: State) => string)undefinedCSS class applied to the element, or a function that returns a class based on the component's state.
styleStyleValue | ((state: State) => StyleValue)undefinedStyle applied to the element, or a function that returns a style object based on the component's state.
EmitsTypeDescription
open-change(open: boolean, details: EventDetails)Emitted when the panel is opened or closed.
AttributeDescription
data-indexIndicates the index of the accordion item.
data-disabledPresent when the accordion item is disabled.
data-openPresent when the accordion item is open.
data-closedPresent when the accordion item is closed.

A heading that labels the corresponding panel. Renders an <h3> element.

PropTypeDefaultDescription
asstring | Component'h3'The element or component to use for the root node.
classstring | ((state: State) => string)undefinedCSS class applied to the element, or a function that returns a class based on the component's state.
styleStyleValue | ((state: State) => StyleValue)undefinedStyle applied to the element, or a function that returns a style object based on the component's state.
AttributeDescription
data-indexIndicates the index of the accordion item.
data-disabledPresent when the accordion item is disabled.
data-openPresent when the accordion item is open.
data-closedPresent when the accordion item is closed.

Trigger ​

A button that opens and closes the corresponding panel. Renders a <button> element.

PropTypeDefaultDescription
asstring | Component'button'The element or component to use for the root node.
disabledbooleanundefinedWhether the trigger should ignore user interaction. When undefined, inherits from the item/root.
idstringundefinedThe id of the trigger element. When set, overrides the auto-generated trigger id.
native-buttonbooleantrueWhether the component renders a native <button> element.
classstring | ((state: State) => string)undefinedCSS class applied to the element, or a function that returns a class based on the component's state.
styleStyleValue | ((state: State) => StyleValue)undefinedStyle applied to the element, or a function that returns a style object based on the component's state.
AttributeDescription
data-panel-openPresent when the accordion panel is open.

Panel ​

A collapsible panel with the accordion item contents. Renders a <div> element.

PropTypeDefaultDescription
asstring | Component'div'The element or component to use for the root node.
idstringundefinedThe id of the panel element. When set, overrides the auto-generated panel id.
keep-mountedbooleanundefinedWhether to keep the element in the DOM while the panel is hidden. When undefined, inherits from the root.
hidden-until-foundbooleanundefinedAllows the browser's built-in page search to find and expand the panel contents. Overrides keep-mounted and uses hidden="until-found".
classstring | ((state: State) => string)undefinedCSS class applied to the element, or a function that returns a class based on the component's state.
styleStyleValue | ((state: State) => StyleValue)undefinedStyle applied to the element, or a function that returns a style object based on the component's state.
AttributeDescription
data-openPresent when the accordion panel is open.
data-closedPresent when the accordion panel is closed.
data-starting-stylePresent when the panel is animating in.
data-ending-stylePresent when the panel is animating out.
data-indexIndicates the index of the accordion item.
CSS VariableDescription
--accordion-panel-heightThe accordion panel's height.
--accordion-panel-widthThe accordion panel's width.