Accordion

The Accordion component is a Radix Accordion. This set of components only provides functionality. The only styled part is the Content which only has animation styles set to it.

Basic example

import { Accordion } from '@streamelements/frontend-ui';

<Accordion.Root type="single" collapsible>
  <Accordion.Item value="root" asChild>
    <Card.Root padding="regular" radius="sm">
    <Accordion.Header>
      <Accordion.Trigger>
        <Text.Body>Toggle expand accordion</Text.Body>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text.Body css={{ py: '1rem' }}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
      rerum similique porro necessitatibus voluptate in animi exercitationem
      doloremque provident blanditiis aspernatur, nisi eum, non harum reiciendis
      dolorem veritatis quibusdam. Ipsam!</Text.Body>
    </Accordion.Content>
    </Card.Root>
  </Accordion.Item>
</Accordion.Root>

Multiple accordions

To display multiple accordions tied to each-other, where only one can be open, you need to use the basic components.

import { Accordion } from '@streamelements/frontend-ui';

<Accordion.Root type="single">
  <Accordion.Item value="first">
    <Accordion.Header>
      <Accordion.Trigger>
      First
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
      rerum similique porro necessitatibus voluptate in animi exercitationem
      doloremque provident blanditiis aspernatur, nisi eum, non harum reiciendis
      dolorem veritatis quibusdam. Ipsam!
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="second">
    <Accordion.Header>
      <Accordion.Trigger>Second</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam
      rerum similique porro necessitatibus voluptate in animi exercitationem
      doloremque provident blanditiis aspernatur, nisi eum, non harum reiciendis
      dolorem veritatis quibusdam. Ipsam!
    </Accordion.Content>
  </Accordion.Item>
  </Accordion.Root>

Nesting

You can nest Accordions.

import { Accordion } from '@streamelements/frontend-ui';

<Accordion.Root type="single">
  <Accordion.Item value="root">
    <Accordion.Header>
      <Accordion.Trigger>Parent accordion</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      Parent accordion content
      <Accordion.Root className={nestedShadow} type="single">
        <Accordion.Item value="child">
          <Accordion.Header>
            <Accordion.Trigger>Nested accordion</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content>
            Nested accordion content
          </Accordion.Content>
        </Accordion.Item>
      </Accordion.Root>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

API Reference

Root

Radix Accordion Root. Contains all the pieces for an accordion.

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
type*	'single' | 'multiple'	–	Determines whether a single Content can be open at a time or multiple Contents at the same time.
value	'single' | 'multiple'	–	The controlled value of the item to expand. Use in conjunction withonValueChange
defaultValue	string	–	Sets the initial expanded items. Use when you don't need to control the state
onValueChange	Function	–	Called when the expanded state of an item changes. Function(next: string): void
value	string[]	[]	The controlled value of the item to expand when type=multiple. Use in conjunction withonValueChange
defaultValue	string[]	[]	Sets the initial expanded items when type=multiple. Use when you don't need to control the state
onValueChange	Function	–	Called when the expanded state of an item changes when type=multiple. Function(next: string[]): void
disabled	boolean	–	When true, prevents the user from interacting with the accordion and all its items.

Item

Radix Accordion Item. Contains all the parts for a collapsible section.

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
value*	string	–	Unique identifier value for the item.
disabled	boolean	–	When true, prevents the user from interacting with the item.

Header

Radix Accordion Header. Wraps an Accordion.Trigger. Use the as prop to update it to the appropriate Tag name | Component for your page.

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Button

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

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

Content

The Content component is customized to include an animation when the open/closed state changes. It is recommended you use the className prop to apply additional styling, because the Radix component has already been put through styled so that an animation is applied. Alternatively, you can import the AccordionSlideUpKeyframes and AccordionSlideDownKeyframes to apply them to your use-case.

Name	Type	Default value	Description
asChild	boolean	–	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
forceMount	boolean	–	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.