---
title: Accordions
description: Accordions allow users to show and hide sections of related content on a page. They can be stand-alone or stacked.
category: Navigation
related: [Tabs, MultiAccordion, Container]
commonPatterns: [faq-accordion, settings-accordion, collapsible-content]
---

Source: https://clickhouse.design/click-ui/accordions

# Accordions

Accordions allow users to show and hide sections of related content on a page. They help organize information while keeping the interface clean and scannable.

## Accordion

The accordion component allows the user to show and hide sections of related content on a page. Accordions can be stand-alone or can be stacked.

## Example

## Props

| Prop                   | Type                   | Default value | Description                                                          |
| ---------------------- | ---------------------- | ------------- | -------------------------------------------------------------------- |
| title
          \* | `string`               | `undefined`   | Title text displayed in the accordion header. Required.              |
| size                   | `"sm" \| "md" \| "lg"` | `"md"`        | Size variant of the accordion                                        |
| gap                    | `"sm" \| "md" \| "lg"` | `"md"`        | Spacing between the accordion header and content                     |
| color                  | `"default" \| "link"`  | `"default"`   | Color variant of the accordion title text                            |
| fillWidth              | `boolean`              | `false`       | Whether the accordion should take up the full width of its container |

```tsx
import { Accordion, Text } from '@clickhouse/click-ui'

<Accordion 
size="lg" 
title="Example of an accordion"
>
<Text>
  This content is only visible when the accordion is expanded
</Text>
</Accordion>
```

## Quick start

```tsx
import { Accordion, Text } from '@clickhouse/click-ui'

function MyAccordion() {
return (
  <Accordion title="FAQ Item" fillWidth>
    <Text>This is the answer to the frequently asked question.</Text>
  </Accordion>
)
}
```

## Related components

- **Tabs**: For organizing content into multiple panels with persistent visibility.
- **MultiAccordion**: For multiple accordion items with completion tracking.
- **Container**: For organizing multiple accordions.

## Common use cases

### FAQ Accordion

```tsx
import { Accordion, Text, Container } from '@clickhouse/click-ui'

function FAQAccordion() {
return (
  <Container orientation='vertical' gap='sm'>
    <Accordion title="What is ClickHouse?" fillWidth>
      <Text>ClickHouse is a column-oriented database management system.</Text>
    </Accordion>
    <Accordion title="How do I get started?" fillWidth>
      <Text>You can get started by installing ClickHouse.</Text>
    </Accordion>
  </Container>
)
}
```

## MultiAccordion

The MultiAccordion component is designed for step-by-step tasks, such as checklists. It builds on the regular accordion with features like marking items as complete and automatically closing completed sections.

## Example

## Props

| Prop            | Type                      | Default value | Description                                                                                   |
| --------------- | ------------------------- | ------------- | --------------------------------------------------------------------------------------------- |
| type            | `"single" \| "multiple"`  | `"single"`    | Whether only one item can be open at a time (single) or multiple items can be open (multiple) |
| size            | `"sm" \| "md" \| "lg"`    | `"md"`        | Size variant of the multi-accordion items                                                     |
| showBorder      | `boolean`                 | `true`        | Whether to display borders around accordion items                                             |
| showCheck       | `boolean`                 | `false`       | Whether to show checkmark icons for completed items                                           |
| fillWidth       | `boolean`                 | `false`       | Whether the multi-accordion should take up the full width of its container                    |
| markAsCompleted | `(value: string) => void` | `undefined`   | Callback function called when an item is marked as completed. Receives the item value.        |

```tsx
import { MultiAccordion } from '@clickhouse/click-ui'

<MultiAccordion
type="single"
showBorder
showCheck
fillWidth
size="md"
markAsCompleted={value => console.log("Completed", value)}
collapsible
title="Checklist"
>
<MultiAccordion.Item
  title="Option 1"
  value="option-1"
  isCompleted
>
  Option 1 content
</MultiAccordion.Item>
<MultiAccordion.Item
  title="Option 2"
  value="option-2"
>
  Option 2 content
</MultiAccordion.Item>
</MultiAccordion>
```

### MultiAccordion.Item Props

| Prop                   | Type                                  | Default value | Description                                                               |
| ---------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------- |
| title&#xA;          \* | `string`                              | `''`          | Title text displayed in the accordion item header. Required.              |
| value                  | `string`                              | `undefined`   | Unique value identifier for this accordion item                           |
| isCompleted            | `boolean`                             | `false`       | Whether this item is marked as completed                                  |
| color                  | `"default", "link"`                   | `"default"`   | Color variant of the accordion item title text                            |
| gap                    | `"sm", "md", "lg"`                    | `"md"`        | Spacing between the accordion item header and content                     |
| icon                   | `IconType`                            | `''`          | Icon name to display in the accordion item header                         |
| iconSize               | `"xs", "sm", "md", "lg", "xl", "xxl"` | `"md"`        | Size of the icon displayed in the accordion item header                   |
| fillWidth              | `boolean`                             | `false`       | Whether the accordion item should take up the full width of its container |

```tsx
<MultiAccordion.Item
icon="clock"
iconSize="lg"
title="Option 1"
value="option-1"
isCompleted
>
Option 1 content
</MultiAccordion.Item>
```

## Quick start

```tsx
import { MultiAccordion } from '@clickhouse/click-ui'

function MyMultiAccordion() {
return (
  <MultiAccordion
    type="single"
    showBorder
    showCheck
    fillWidth
    title="Checklist"
  >
    <MultiAccordion.Item
      title="Step 1"
      value="step-1"
      isCompleted
    >
      Step 1 content
    </MultiAccordion.Item>
    <MultiAccordion.Item
      title="Step 2"
      value="step-2"
    >
      Step 2 content
    </MultiAccordion.Item>
  </MultiAccordion>
)
}
```

## Common use cases

### Settings accordion

```tsx
import { Accordion, Text, Container } from '@clickhouse/click-ui'

function SettingsAccordion() {
return (
  <Container orientation='vertical' gap='sm'>
    <Accordion title="Account settings" fillWidth>
      <Text>Manage your account preferences.</Text>
    </Accordion>
    <Accordion title="Privacy settings" fillWidth>
      <Text>Control your privacy preferences.</Text>
    </Accordion>
  </Container>
)
}
```

### Checklist with MultiAccordion

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

function Checklist() {
return (
  <MultiAccordion
    type="single"
    showBorder
    showCheck
    fillWidth
    title="Setup checklist"
  >
    <MultiAccordion.Item
      title="Install dependencies"
      value="install"
      isCompleted
    >
      <Text>Install all required dependencies.</Text>
    </MultiAccordion.Item>
    <MultiAccordion.Item
      title="Configure settings"
      value="configure"
    >
      <Text>Configure your project settings.</Text>
    </MultiAccordion.Item>
  </MultiAccordion>
)
}
```