Returnless UI

Accordion ​

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

Variants ​

Default ​

Use to display a list of questions and answers. The user can click on a question to reveal the answer.

js
<script lang="ts" setup>
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@returnless/focus-ui';
</script>

<template>
  <Accordion>
    <AccordionItem>
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>Yes. It adheres to the AI-ARIA design system</AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger>Is it styled?</AccordionTrigger>
      <AccordionContent>Yes. It comes with default styles that matches the other components' aesthetic.</AccordionContent>
    </AccordionItem>
    <AccordionItem>
      <AccordionTrigger>Is it animated?</AccordionTrigger>
      <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
    </AccordionItem>
  </Accordion>
</template>