Components

Accordion

Accordions display a list of high-level options that can expand/collapse to reveal more information.

Import

Accordion: The wrapper that uses cloneElement to pass it's prop to the AccordionItem.
AccordionItem: A single accordion item.
AccordionHeader: The button that toggles the expand/collapse state of the accordion item.
AccordionPanel: The container for the details to be revealed.
AccordionIcon: A chevron-down icon that rotates based on the expanded/collapsed state

import { Accordion, AccordionItem, AccordionHeader, AccordionPanel, AccordionIcon } from '@outfitio/outkit';

Usage

By default, only one item may be expanded and it can only be collapsed again by expanding another.

Expand multiple items at once

If you set allowMultiple to true then the accordion will permit multiple items to be expanded at once.

If you pass this prop, ensure that the index or defaultIndex prop is an array.

Toggle each accordion item

If you set allowToggle to true, any expanded item may be collapsed again.

Accessing the internal state

If you need access to the internal state of each accordion item, you can use a render prop. It provides 2 internal state isExpanded, and isDisabled.

Accessibility

Use the ariaExpanded prop to add an aria-expanded attribute, which conveys the expanded or collapsed state to screen reader users.
To expand or collapse the accordiong, pressing space or enter when focus is on the accordion panel header.

Best Practice

The accordion component can be used for information that is lower priority or users don’t need to see all the time
It should not be used to hide error messages or other critical information that requires immediate action.

Props

Accordion Props

Name	Type	Description
allowMultiple	`boolean`	If `true`, multiple accordion items can be expanded at once.
allowToggle	`boolean`	If `true`, any expanded accordion item can be collapsed again.
index	`NumberOrArrayOfNumber`	The index(es) of the expanded accordion item
defaultIndex	`NumberOrArrayOfNumber`	The initial index(es) of the expanded accordion item
onChange	`(NumberOrArrayOfNumber) => void`	The callback invoked when accordion items are expanded or collapsed.
children	`ReactNode`	The content of the accordion. The children must be the `AccordionHeader` and `AccordionPanel` components.

AccordionItem Props

Name	Type	Description
isOpen	`boolean`	If `true`, expands the accordion in the controlled mode.
defaultIsOpen	`boolean`	If `true`, expands the accordion by on initial mount.
id	`string`	A unique `id` for the accordion item.
isDisabled	`boolean`	If `true`, the accordion header will be disabled.
onChange	`(NumberOrArrayOfNumber) => void`	The callback fired when the accordion is expanded/collapsed.
children	`ReactNode`, `(RenderProps) => ReactNode`	The content of the accordion. The children must be the `AccordionHeader` and `AccordionPanel` components.

AccordionHeader Props

AccordionHeader renders a button and composes PseudoBox, this means you can style it by passing the pseudo style props _expanded, _disabled, _hover, etc.

AccordionPanel Props

AccordionPanel renders a div and composes Collapse to provide the height animation.