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

Prop	Type	Default	Explanation
`variant`	`enum`	stacked	The variant style of the accordion list.
`type`	`enum`	single	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

Prop	Type	Default	Explanation
`arrow`	`boolean`	true	(Optional) Show animated arrow on the right of the heading