Accordion

Vertically stacked collapsible sections. Wraps bits-ui Accordion.

Example

Content for section one.

Sub-components

Accordion.Root

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Whether one or many items can be open
`value`	`string \| string[]`	`''`	Active item value(s) (bindable)
`onValueChange`	`(value: string \| string[]) => void`	—	Called when active item changes
`class`	`string`	—	Additional CSS classes

Accordion.Item

Prop	Type	Default	Description
`value`	`string`	—	Item identifier
`class`	`string`	—	Additional CSS classes

Accordion.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

Accordion.Content

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { Accordion } from '@chrissnell/chonky-ui';
</script>

<Accordion.Root type="single" value="first">
  <Accordion.Item value="first">
    <Accordion.Trigger>First section</Accordion.Trigger>
    <Accordion.Content>First section content.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="second">
    <Accordion.Trigger>Second section</Accordion.Trigger>
    <Accordion.Content>Second section content.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>