Accordion

Accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be collapsed with just a short label visible or expanded to show the full content.

Usage

Code Editor
Copy
import { Accordion } from '@erudilabs/alma'
import type { AccordionItemsProps } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { AccordionItemsProps } from '@erudilabs/alma'
AccordionItemsProps = { title: ReactNode; content: ReactNode }[]

To make Accordion content you must have an array of object and use AccordionItemsProps types like example below

Code Editor
Copy
const items: AccordionItemsProps = [
  {
    title: 'Do you have a guardian',
    content:
      'Account verification and important application updates will be sent to your mobile, therefore you must have a working mobile number',
  },
  {
    title: 'Do you have a valid and active mobile number',
    content:
      'We will require you to provide a guardian who is at least 21 years old and currently residing in the Philippines. Your guardian must also have a contactable mobile number and an active email address.',
  },
]

Component

Here preview and detail explain of Accordion component


Default


Code Editor
Copy
<Accordion items={items} />

Expanded Item

In an accordion component, the default expanded item refers to the section that is initially expanded when the accordion is rendered. By default, all other sections are collapsed. but you can set with defaultExpandedItem prop set with an number or all.


Single Item

Do you have a guardian
Account verification and important application updates will be sent to your mobile, therefore you must have a working mobile number

Code Editor
Copy
<Accordion items={items} defaultExpandedItem={1} />

All Item

if you pass with all accordion items will expanded all items and allow multipleExpand without passing the props


Do you have a guardian
Account verification and important application updates will be sent to your mobile, therefore you must have a working mobile number
Do you have a valid and active mobile number
We will require you to provide a guardian who is at least 21 years old and currently residing in the Philippines. Your guardian must also have a contactable mobile number and an active email address.

Code Editor
Copy
<Accordion items={items} defaultExpandedItem="all" />

Multiple Expand

Allows multiple items to be expanded simultaneously, you can use props multipleExpand as a boolean.



Code Editor
Copy
<Accordion items={items} multipleExpand />

Props Reference

Prop
Type

testId?

string

className?

string

items

AccordionItemsProps

defaultExpandedItem?

number | all

multipleExpand?

boolean