Accordion

A collapsible component for displaying content in a vertical stack.

Demo

React
Vue

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces (UIs). It is maintained by Meta (formerly Facebook) and a large community of individual developers and companies.

import { Accordion } from '@fintech-sandpit/ui/react';

return (
  <Accordion.Root
    defaultValue={['a']}
    multiple
    collapsible
  >
    <Accordion.Item value="a">
      <Accordion.ItemTrigger>
        <span className="text-lg">
          Slide A
        </span>

        <Accordion.ItemIndicator />
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        <p>
          Slide A content
        </p>
      </Accordion.ItemContent>
    </Accordion.Item>

    <Accordion.Item value="b">
      <Accordion.ItemTrigger>
        <span className="text-lg">
          Slide B
        </span>

        <Accordion.ItemIndicator />
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        <p>
          Slide B content
        </p>
      </Accordion.ItemContent>
    </Accordion.Item>

    <Accordion.Item
      value="c"
      disabled
    >
      <Accordion.ItemTrigger>
        <span className="text-lg">
          Slide C (disabled)
        </span>

        <Accordion.ItemIndicator />
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        <p>
          Slide C content
        </p>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
);

<script setup lang="ts">
import { Accordion } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Accordion.Root
    :default-value="['a']"
    multiple
    collapsible
  >
    <Accordion.Item value="a">
      <Accordion.ItemTrigger>
        <span class="text-lg">
          Slide A
        </span>

        <Accordion.ItemIndicator />
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        <p>
          Slide A content
        </p>
      </Accordion.ItemContent>
    </Accordion.Item>

    <Accordion.Item value="b">
      <Accordion.ItemTrigger>
        <span class="text-lg">
          Slide B
        </span>

        <Accordion.ItemIndicator />
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        <p>
          Slide B content
        </p>
      </Accordion.ItemContent>
    </Accordion.Item>

    <Accordion.Item
      value="c"
      disabled
    >
      <Accordion.ItemTrigger>
        <span class="text-lg">
          Slide C (disabled)
        </span>

        <Accordion.ItemIndicator />
      </Accordion.ItemTrigger>

      <Accordion.ItemContent>
        <p>
          Slide C content
        </p>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
</template>

Props

Accordion Root Props

React
Vue

Name	Type	Default	Description
`defaultValue`	`string[]`	`[]`	The initial value of the expanded accordion items
`collapsible`	`boolean`	`false`	Whether an accordion item can be closed after it has been expanded
`disabled`	`boolean`	`false`	Badge style variant
`multiple`	`boolean`	`false`	The value of the expanded accordion items

Name	Type	Default	Description
`default-value`	`string[]`	`[]`	The initial value of the expanded accordion items
`collapsible`	`boolean`	`false`	Whether an accordion item can be closed after it has been expanded
`disabled`	`boolean`	`false`	Badge style variant
`multiple`	`boolean`	`false`	The value of the expanded accordion items

Accordion Item Props

Name	Type	Required	Default	Description
`value`	`string`	Yes		The value of the accordion item
`disabled`	`boolean`		`false`	Whether the accordion item is disabled

Accordion Item Indicator Props

Name	Type	Required	Default	Description
`icon`	`IconDefinition`		`faChevronDown`	The icon to display in the accordion item indicator ¹

See Icons for the list of available icon definitions.