Import

import { Accordion } from "@fuegokit/react";

Usage

Yes. It adheres to the WAI-ARIA design pattern.

<Accordion>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger />
    </Accordion.Header>
    <Accordion.Content />
  </Accordion.Item>
</Accordion>

Props

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
type*	'single' \| 'multiple'	-	The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.
value	string	-	The controlled value of the item to expand when type is 'single'. Must be used in conjunction with `onValueChange`.
defaultValue	string	-	The value of the item to expand when initially rendered and type is 'single'. Use when you do not need to control the state of the items.
onValueChange	boolean	(value: string) => void	Event handler called when the expanded state of an item changes and type is 'single'.
value	string[]	-	The controlled value of the item to expand when type is 'multiple'. Must be used in conjunction with onValueChange.
defaultValue	string[]	[]	The value of the item to expand when initially rendered and type is 'single'. Use when you do not need to control the state of the items.
onValueChange	(value: string[]) => void	-	Event handler called when the expanded state of an item changes and type is 'multiple'.
collapsible	boolean	false	When type is 'single', allows closing content when clicking trigger for an open item.
disabled	boolean	false	When `true`, prevents the user from interacting with the accordion and all its items.
dir	'ltr' \| 'rtl'	'ltr'	When `true`, prevents the user from interacting with the accordion and all its items.
orientation	'horizontal' \| 'vertical'	'vertical'	The orientation of the accordion.

Data attributes

Data attribute	Values
[data-orientation]	'vertical' \| 'horizontal'

Accordion.Item

Contains all the parts of a collapsible section.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
disabled	boolean	false	When `true`, prevents the user from interacting with the item.
value*	string	-	A unique value for the item.

Data attributes

Data attribute	Values
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled
[data-orientation]	'vertical' \| 'horizontal'

Accordion.Header

Wraps an `Accordion.Trigger`. Use the `asChild` prop to update it to the appropriate heading level for your page.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Data attributes

Data attribute	Values
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled
[data-orientation]	'vertical' \| 'horizontal'

Accordion.Trigger

Toggles the collapsed state of its associated item. It should be nested inside of an `Accordion.Header`.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

Data attributes

Data attribute	Values
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled
[data-orientation]	'vertical' \| 'horizontal'

Accordion.Content

Contains the collapsible content for an item.

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
forceMount	boolean	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Data attributes

Data attribute	Values
[data-state]	'open' \| 'closed'
[data-disabled]	Present when disabled
[data-orientation]	'vertical' \| 'horizontal'

Accordion

Import

Usage

Is it accessible?

Is it unstyled?

Can it be animated?

Props

Accordion

Accordion.Item

Accordion.Header

Accordion.Trigger

Accordion.Content