Toggle the visibility of content. Useful for something like an FAQ page, for example. Includes ARIA attributes for expandable content and is keyboard friendly.

Styled Example

Basic Usage

Label Slot

Sometimes just a text string won't do. For example, you may want to add icons or something.

Scoped Slots

You can access the open status through the scoped slots.


  • update: fires on any change and provides the open status
  • open: fires on open.
  • close: fires on close.

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, label: string, content: string }"