Multi Accordion

Multi Accordion provides multiple collapsible sections that can be expanded independently. It supports single or multiple open items, completion indicators, and customizable styling. Perfect for checklists, settings panels, and step-by-step processes.

Example

First Item

Content for the first accordion item.

Second Item

Third Item

Props

Prop	Type	Default value	Description
Prop type	Type "single" \| "multiple"	Default value "single"	Description Whether only one item can be open at a time (single) or multiple items can be open (multiple)
Prop defaultValue	Type string \| Array<string>	Default value undefined	Description Default open item(s) for uncontrolled accordions. String for single type, array for multiple type.
Prop value	Type string \| Array<string>	Default value undefined	Description Currently open item(s) for controlled accordions
Prop onValueChange	Type (value: string \| Array<string>) => void	Default value undefined	Description Callback function called when open items change. Receives the new value(s).
Prop size	Type "none" \| "sm" \| "md" \| "lg"	Default value "md"	Description Size variant of the accordion items
Prop fillWidth	Type boolean	Default value true	Description Whether the accordion should take up the full width of its container
Prop gap	Type GapOptions	Default value "md"	Description Spacing between accordion items
Prop showBorder	Type boolean	Default value true	Description Whether to display borders around accordion items
Prop showCheck	Type boolean	Default value false	Description Whether to show checkmark icons for completed items
Prop markAsCompleted	Type (value: string) => void \| Promise<void>	Default value undefined	Description Callback function called when an item is marked as completed. Receives the item value.

MultiAccordion.Item Props

Prop	Type	Default value	Description
Prop value	Type string	Default value ''	Description Unique value identifier for this accordion item. Required.
Prop title	Type ReactNode	Default value ''	Description Title text or content displayed in the accordion item header. Required.
Prop color	Type "default" \| "link"	Default value "default"	Description Color variant of the accordion item title text
Prop icon	Type IconName	Default value ''	Description Icon name to display in the accordion item header
Prop iconSize	Type IconSize	Default value ''	Description Size of the icon displayed in the accordion item header
Prop gap	Type SpacerSizeType	Default value ''	Description Spacing between the accordion item header and content
Prop isCompleted	Type boolean	Default value false	Description Whether this item is marked as completed
Prop disabled	Type boolean	Default value false	Description Whether this accordion item is disabled and cannot be interacted with

Quick Start

import { MultiAccordion, Text } from '@clickhouse/click-ui'

function MyMultiAccordion() {
return (
  <MultiAccordion type="multiple" defaultValue={['item1']}>
    <MultiAccordion.Item value="item1" title="First Item">
      <Text>Content for the first item.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value="item2" title="Second Item">
      <Text>Content for the second item.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}

Accordions: For single accordion items instead of multiple.
VerticalStepper: For step-by-step processes with progress indicators.
Container: For organizing accordions within layouts.

Common Use Cases

Checklist Accordion

Completed Item

This item is marked as completed.

Incomplete Item

import { MultiAccordion, Text } from '@clickhouse/click-ui'

function ChecklistAccordion() {
return (
  <MultiAccordion type='multiple' showCheck defaultValue={['item1']}>
    <MultiAccordion.Item value='item1' title='Completed Item' isCompleted>
      <Text>This item is marked as completed.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value='item2' title='Incomplete Item'>
      <Text>This item is not yet completed.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}

Settings Accordion

Account Settings

Manage your account preferences.

Privacy Settings

import { MultiAccordion, Text } from '@clickhouse/click-ui'

function SettingsAccordion() {
return (
  <MultiAccordion type='single' defaultValue='settings1'>
    <MultiAccordion.Item value='settings1' title='Account Settings'>
      <Text>Manage your account preferences.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value='settings2' title='Privacy Settings'>
      <Text>Control your privacy preferences.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}

With Icons

Item with Icon

This item has an icon.

Another Item

import { MultiAccordion, Text } from '@clickhouse/click-ui'

function MultiAccordionWithIcons() {
return (
  <MultiAccordion type='multiple' defaultValue={['item1']}>
    <MultiAccordion.Item value='item1' title='Item with Icon' icon='star'>
      <Text>This item has an icon.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item value='item2' title='Another Item' icon='check'>
      <Text>This item also has an icon.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}

Accordion Vertical Stepper