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 "@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.
`collapsible`	`boolean`	false	When type is "single", allows the user to close an open item by clicking it again.
`value`	`string \| string[]`	-	The controlled value(s) of the item(s) to expand. Use string for "single" type and string[] for "multiple" type.
`defaultValue`	`string \| string[]`	-	The default value(s) of the item(s) to expand when initially rendered. Use string for "single" type and string[] for "multiple" type.
`onValueChange`	`function`	-	Event handler called when the expanded state of an item changes.
`disabled`	`boolean`	false	When true, prevents the user from interacting with the accordion.
`dir`	`enum`	ltr	The reading direction of the accordion when applicable.
`orientation`	`enum`	vertical	The orientation of the accordion.

Accordion.Item

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

Prop	Type	Default	Explanation
`value`	`string`	-	A unique value for the item.
`disabled`	`boolean`	false	When true, prevents the user from interacting with the item.

Accordion.Header

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

Prop	Type	Default	Explanation
`children`	`React.ReactNode`	-	The content of the accordion header trigger.

Accordion.Content

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

Prop	Type	Default	Explanation
`children`	`React.ReactNode`	-	The content of the accordion panel.
`forceMount`	`boolean`	false	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius