Accordion

A collapsible component for displaying content in a vertical stack.

Demo

React

What is React?

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.

What is Solid?

What is Vue?

What is Svelte?

What is Angular?

Vue

What is React?

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.

What is Solid?

What is Vue?

What is Svelte?

What is Angular?

Usage

React

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

return (
  <Accordion.Root defaultValue={['a']}>
    <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
        </span>

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

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

Vue

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

<template>
  <Accordion.Root :default-value="['a']">
    <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
        </span>

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

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

Props

Accordion Root Props

React

Name	Type	Required	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

Vue

Name	Type	Required	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 1

1. See Icons for the list of available icon definitions.