Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.
SourceStorybook
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Import

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

Usage

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

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


<Accordion type="single" defaultValue="item-1" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </Accordion.Content>
  </Accordion.Item>

Styling

To apply styles to the Accordion primitive, use Fuegokit React's themeGet function to access Fuegokit Tokens directly.

Component API

<StyledAccordion type="single" defaultValue="item-1" collapsible>
  <StyledAccordionItem value="item-1">
    <StyledAccordionTrigger>Is it accessible?</StyledAccordionTrigger>
    <StyledAccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </StyledAccordionContent>
  </StyledAccordionItem>


  <StyledAccordionItem value="item-2">

CSS

/apps/react-docs/examples/components/StyledAccordionExample.js

const slideDown = keyframes`
  from {
    height: 0
  }
  to {
    height: var(--radix-accordion-content-height)
  }
`;
const slideUp = keyframes`

Props

Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.
NameTypeDefaultDescription
asChild
boolean
falseChange 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) => voidEvent 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
falseWhen type is 'single', allows closing content when clicking trigger for an open item.
disabled
boolean
falseWhen `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 attributeValues
[data-orientation]
'vertical' | 'horizontal'

Accordion.Item

Contains all the parts of a collapsible section.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
disabled
boolean
falseWhen `true`, prevents the user from interacting with the item.
value*
string
-A unique value for the item.
Data attributes
Data attributeValues
[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.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
Data attributes
Data attributeValues
[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`.
NameTypeDefaultDescription
asChild
boolean
falseChange the default rendered element for the one passed as a child, merging their props and behavior.
Data attributes
Data attributeValues
[data-state]
'open' | 'closed'
[data-disabled]
Present when disabled
[data-orientation]
'vertical' | 'horizontal'

Accordion.Content

Contains the collapsible content for an item.
NameTypeDefaultDescription
asChild
boolean
falseChange 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 attributeValues
[data-state]
'open' | 'closed'
[data-disabled]
Present when disabled
[data-orientation]
'vertical' | 'horizontal'