Accordion

A component used for hiding and showing UI content for users.

There are three variants of accordions, Border, No border and List. Each of them provides their own style.

You have to use three different types of components. The container is the accordion, followed by the accordionItem and then the accordionPanel in the item. AccordionPanel holds the content. AccordionItem is the button the user clicks to hide and show the content and Accordion provides correct styling and functionality.

Accordion has a default width of 100%, to control the width you can either provide a parent element or override the width property.

Variants

Border variant (default)

import { Accordion, AccordionItem, AccordionPanel } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion w="300px">
      <AccordionItem title="With border" value="0">
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

No border variant

import { Accordion, AccordionItem, AccordionPanel } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion variant="noBorder" w="300px">
      <AccordionItem title="Without border" value="0">
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

List variant

Used when you want to have a list of accordions. You can expand the list how much you want, just add more accordionItem and accordionPanel and the list of accordions will grow.

import { Accordion, AccordionItem, AccordionPanel } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion variant="list" w="300px">
      <AccordionItem title="Accordion 1" value="0">
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem title="Accordion 2" value="1">
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem title="Accordion 3" value="2">
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Custom title component

You can also use a custom title component. Just pass the component as the title prop to the AccordionItem.

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  Badge,
  Flex,
  ThemeSpace,
} from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion w="300px">
      <AccordionItem
        value="0"
        title={
          <Flex gap={ThemeSpace.Small} alignItems="center">
            Label text
            <Badge.Success>Badge</Badge.Success>
          </Flex>
        }
      >
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Right element

Use the rightElement prop to show an interactive element, such as an IconButton, right after the title. Clicking it does not expand or collapse the item.

import { Accordion, AccordionItem, AccordionPanel, EditIcon, IconButton } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion w="300px">
      <AccordionItem
        value="0"
        title="Label text"
        rightElement={<IconButton aria-label="Edit" icon={EditIcon} size="sm" variant="ghost" />}
      >
        <AccordionPanel>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry&apos;s standard dummy text ever since the 1500s, when an unknown printer took a galley of
          type and scrambled it to make a type specimen book.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Controlling expanded state

You can control the initial expanded state of the accordion by passing the defaultIndex (can be multiple) prop to the Accordion. To subscribe to the expanded state changes, you can use the onChange prop. If you want to fully control the expanded state, you can use the index prop.

import { Accordion, AccordionItem, AccordionPanel } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion variant="list" defaultValue={["1"]} w="300px">
      <AccordionItem title="Index 0" value="0">
        <AccordionPanel>Lorem Ipsum.</AccordionPanel>
      </AccordionItem>
      <AccordionItem title="Index 1" value="1">
        <AccordionPanel>I am expanded initially!</AccordionPanel>
      </AccordionItem>
      <AccordionItem title="Index 2" value="2">
        <AccordionPanel>Lorem Ipsum.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

import { Accordion, AccordionItem, AccordionPanel } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Accordion defaultValue={["0"]} w="300px">
      <AccordionItem title="Index 0" value="0">
        <AccordionPanel>I am a single accordion with a default expanded state.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  type AccordionValueChangeDetails,
} from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const initialValue = ["0", "1"];
  const [value, setValue] = useState<string[]>(initialValue);
  const onChange = (details: AccordionValueChangeDetails) => {
    setValue(details.value);
  };

  return (
    <Accordion variant="list" value={value} onValueChange={onChange} w="300px">
      <AccordionItem title="Index 0" value="0">
        <AccordionPanel>Lorem Ipsum.</AccordionPanel>
      </AccordionItem>
      <AccordionItem title="Index 1" value="1">
        <AccordionPanel>Lorem Impsum.</AccordionPanel>
      </AccordionItem>
      <AccordionItem title="Index 2" value="2">
        <AccordionPanel>Lorem Ipsum.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}