Hopper

Accordion

An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.

View sourceView on npmReport an issue
AI Tip Want to skip the docs? Use the MCP Server

Anatomy

Structure

<Accordion>
    <Disclosure> /* (Required) A disclosure for the Accordion */
        <DisclosureHeader> /* (Required) A header for the Disclosure */
            <Text /> /* (Optional) A text description for the DisclosureHeader */
            <Icon /> /* (Optional) An icon for the DisclosureHeader */
        </DisclosureHeader>
        <DisclosurePanel /> /* (Required) A panel for the Disclosure */
    </Disclosure>
</Accordion>

Composed Components

An Accordion uses the following components.

Disclosure

The disclosure component is used to put long sections of information under a block that users can expand or collapse.

Icon

An icon component is used to render a custom icon.

Text

A text component is a primitive component matching Hopper's typography type scale.

Usage

Disabled

An accordion can be disabled.

Variants

An accordion has multiple variants.

Standalone - Used when the accordion is not inside a container.

Inline - Used when placing a accordion inside a container.

Expanded

By default, only one disclosure will be expanded at a time. Use allowsMultipleExpanded prop to expand multiple disclosures.

Icon

An accordion heading can contain an icon.

Description

An accordion heading can contain a description.

Controlled

An accordion can handle its opened panels in controlled mode.

Props

variant?
style?

The inline style for the element. A function may be provided to compute the style based on component state.

allowsMultipleExpanded?

Whether multiple items can be expanded at the same time.

isDisabled?

Whether all items are disabled.

expandedKeys?

The currently expanded keys in the group (controlled).

defaultExpandedKeys?

The initial expanded keys in the group (uncontrolled).

children?

The children of the component. A function may be provided to alter the children based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

dir?
lang?
inert?
translate?

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • expansionMode="multiple" has been replaced with allowsMultipleExpanded.
  • borderless and bordered variants are no more. inline and standalone are the new variants. There is no direct match; the new variants are context-based, depending on whether an accordion is contained or not.
  • autofocus is removed. It did not make sense to have.
  • The disclosure component is used instead of Item.
  • disabled is renamed to isDisabled on the item/disclosure.