Accordion

Tidy up your content with our Accordion - a neat stack of titles ready to reveal their secrets on a single tap

Example

1import { Accordion } from '@haktos/sugarcoat-ui';
2
3<Accordion variant='stacked'>
4 <Accordion.Item value='firstItem'>
5 <Accordion.Header>First item</Accordion.Header>
6 <Accordion.Content>
7 <Typography.Paragraph>Section Content One</Typography.Paragraph>
8 </Accordion.Content>
9 </Accordion.Item>
10 <Accordion.Item value='secondItem'>
11 <Accordion.Header>Second Item</Accordion.Header>
12 <Accordion.Content>
13 <Typography.Paragraph>Section Content Two</Typography.Paragraph>
14 </Accordion.Content>
15 </Accordion.Item>
16</Accordion>;
17

API Reference

It builds on top of Radix-UI Accordion

Component Properties

Accordion

Acts as RadixUI's Accordion.Root. Most of the props available here can be used on the Accordion component

PropTypeDefaultExplanation
variantenumstacked

The variant style of the accordion list.

typeenumsingle

Determines whether one or multiple items can be opened at the same time.

Accordion.Item

A styled wrapper around RadixUI's Accordion.Item. Check here for the original props available

Accordion.Header
PropTypeDefaultExplanation
arrowbooleantrue(Optional) Show animated arrow on the right of the heading
Accordion.Content