Biofarma | Bind UI

Accordion

The accordion component that allows users to expand and collapse content sections. It is commonly used to display a large amount of information in a compact space, making it easier for users to scan and consume content.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Content

Usage

import { Accordion } from 'bio-bind-ui';

    <Accordion
      items={[
        {
          title: 'Title',
          content: 'Content',
        },
      ]}
      style={{}}
      mode='light'
      id='accordion'
      variant='none'
      expandedIndexes=[]
      onExpandedIndexes={(expandedIndexes: number[]) => }
    />

Examples

Items

Use items to add content to the accordion

Style (optional)

Use style to custom accordion

Use items to add content to the accordion

Mode (optional)

Use mode to use dark or light

Use items to add content to the accordion

Variant (optional)

Use variant accordion

Use items to add content to the accordion

Props

Props	Required	Default	Type	description
items	true	`[]`	`Array<{ title: string, content: ReactNode }>`	The list of items containing a title and content for the accordion.
style	false	-	`CSSProperties`	Custom styles for the accordion component.
mode	false	`light`	`light` `dark`	The theme mode of the accordion (`light` or `dark`).
id	false	-	`string`	A unique identifier for the accordion.
variant	false	`none`	`none` `border` `background`	The visual style variant of the accordion.
expandedIndexes	false	-	`number[]`	The indexes of the items to be expanded by default.
onExpandedIndexes	false	-	`(indexes: number[]) => void`	Callback triggered when the expanded indexes change.

Web Iconography Appbar