Accordion

Import
import { Accordion } from "reshaped";
import type { AccordionProps } from "reshaped";
Related components
Full keyboard navigation
Can be controlled and uncontrolled
Trigger and content layout can be fully customised


Usage

Accordion is a compound component that includes Accordion.Trigger and Account.Content in it. When it comes to styles, Accordion provides a toggle icon and content transitions, while all other layout styles can be fully customised. For example, you can pick your own typography with the Text utility and decide which gap you want to use with the help of View or custom styles on the product side.

In the following example, we use View with paddingTop defined inside the Accordion.Content which makes the gap between the trigger and the content animated.

Controlled/Uncontrolled

Accordion can be used as a controlled or uncontrolled component. By default, Accordion is uncontrolled and lets you define its default state using the defaultActive property. In this case, all change events are handled automatically.

If you need to control the state of the component manually, you can use the active property instead. That will give you complete control of the content visibility and will stop handling the state automatically. You will have to update the state using the onToggle handler and will be able to add custom logic before the state changes for the user.

Composition

Accordion comes with almost zero styles, which means you can build your own custom layout composition with it. For example, you can combine multiple Accordions together and render the Accordion in a styled View when it's active. Same way, you can change the layout of the Accordion.Trigger content.

Custom trigger

Accordion.Trigger can be used with render props, which means it won't render the default trigger and instead will give you access to all attributes required for it to work. You can pass those attributes to any other component to keep the behaviour accessible.

For example, you can open an Accordion with a Button component and sync it's highlighted property with the state of the Accordion.

Accessibility

  • Only content inside the active Accordion can be focused with keyboard
  • Accordion content area is labelled by the trigger content