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 |
|---|---|---|---|
Prop title * | Type string | Default value undefined | Description Title text displayed in the accordion header. Required. |
Prop size | Type "sm" | "md" | "lg" | Default value "md" | Description Size variant of the accordion |
Prop gap | Type "sm" | "md" | "lg" | Default value "md" | Description Spacing between the accordion header and content |
Prop color | Type "default" | "link" | Default value "default" | Description Color variant of the accordion title text |
Prop fillWidth | Type boolean | Default value false | Description Whether the accordion should take up the full width of its container |
* denotes required field
Quick Start
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
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 |
|---|---|---|---|
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 size | Type "sm" | "md" | "lg" | Default value "md" | Description Size variant of the multi-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 fillWidth | Type boolean | Default value false | Description Whether the multi-accordion should take up the full width of its container |
Prop markAsCompleted | Type (value: string) => 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 title * | Type string | Default value '' | Description Title text displayed in the accordion item header. Required. |
Prop value | Type string | Default value undefined | Description Unique value identifier for this accordion item |
Prop isCompleted | Type boolean | Default value false | Description Whether this item is marked as completed |
Prop color | Type "default", "link" | Default value "default" | Description Color variant of the accordion item title text |
Prop gap | Type "sm", "md", "lg" | Default value "md" | Description Spacing between the accordion item header and content |
Prop icon | Type | Default value '' | Description Icon name to display in the accordion item header |
Prop iconSize | Type "xs", "sm", "md", "lg", "xl", "xxl" | Default value "md" | Description Size of the icon displayed in the accordion item header |
Prop fillWidth | Type boolean | Default value false | Description Whether the accordion item should take up the full width of its container |
* denotes required field
Quick Start
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
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
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>
)
}