unstable_AccordionItem API

Import

import { unstable_AccordionItem as AccordionItem } from "@stratakit/structures";
// OR
import * as AccordionItem from "@stratakit/structures/unstable_AccordionItem";

AccordionItem.Root

Base element: <div>

An item within an accordion. Disclosed content with a label.

Bare minimum example:

<AccordionItem.Root>
  <AccordionItem.Header>
    <AccordionItem.Marker />
    <AccordionItem.Button>
      <AccordionItem.Label>Label</AccordionItem.Label>
    </AccordionItem.Button>
  </AccordionItem.Header>
  <AccordionItem.Content>Body</AccordionItem.Content>
</AccordionItem.Root>

If the accordion item discloses a significant section of the page, it may be desirable to markup its label as a heading for accessibility purposes (e.g. screen reader users often navigate by heading). For those cases, you can wrap the AccordionItem.Button component with an AccordionItem.Heading component and use its render prop for rendering an HTML heading element.

<AccordionItem.Root>
  <AccordionItem.Header>
    <AccordionItem.Marker />
    <AccordionItem.Heading render={<h2 />}>
      <AccordionItem.Button>
        <AccordionItem.Label>Label</AccordionItem.Label>
      </AccordionItem.Button>
    </AccordionItem.Heading>
  </AccordionItem.Header>
  <AccordionItem.Content>Body</AccordionItem.Content>
</AccordionItem.Root>

Example with a decoration:

<AccordionItem.Root>
  <AccordionItem.Header>
    <AccordionItem.Marker />
    <AccordionItem.Decoration render={<Icon href={svgPlaceholder} />} />
    <AccordionItem.Button>
      <AccordionItem.Label>Label</AccordionItem.Label>
    </AccordionItem.Button>
  </AccordionItem.Header>
  <AccordionItem.Content>Body</AccordionItem.Content>
</AccordionItem.Root>

defaultOpen

Type: boolean | undefined (optional)

Default: false

The accordion item’s initial open state.

open

Type: boolean | undefined (optional)

Default: false

The accordion item’s controlled open state.

setOpen

Type: ((open: boolean) => void) | undefined (optional)

Callback fired when the accordion item is opened.

Should be used with the open prop.

Additional props

• render

AccordionItem.Content

Base element: <div>

The disclosed content of the accordion item.

Example:

<AccordionItem.Root>
  <AccordionItem.Header>
    <AccordionItem.Marker />
    <AccordionItem.Button>
      <AccordionItem.Label>Label</AccordionItem.Label>
    </AccordionItem.Button>
  </AccordionItem.Header>
  <AccordionItem.Content>Body</AccordionItem.Content>
</AccordionItem.Root>

Additional props

• render

AccordionItem.Header

Base element: <div>

The always visible header of an accordion item.

Must include an AccordionItem.Button and AccordionItem.Marker as a direct descendants.

Example:

<AccordionItem.Root>
  <AccordionItem.Header>
    <AccordionItem.Marker />
    <AccordionItem.Button>
      <AccordionItem.Label>Label</AccordionItem.Label>
    </AccordionItem.Button>
  </AccordionItem.Header>
  <AccordionItem.Content>Body</AccordionItem.Content>
</AccordionItem.Root>

Additional props

• render

AccordionItem.Button

Base element: <button>

The accordion item button.

Must be a direct descendant of AccordionItem.Header.

Example:

<AccordionItem.Header>
  <AccordionItem.Marker />
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
</AccordionItem.Header>

Additional props

• render

AccordionItem.Label

Base element: <div>

An accordion item’s label.

Must be a descendant of AccordionItem.Button.

Example:

<AccordionItem.Button>
  <AccordionItem.Label>Label</AccordionItem.Label>
</AccordionItem.Button>

Additional props

• render

AccordionItem.Decoration

Base element: <div>

The always-visible, optional decoration of the AccordionItem.Header content. It can be placed before or after the rest of the content in AccordionItem.Header. However, the AccordionItem.Marker must always be placed at either edge (beginning or end) of the header.

Use as a direct descendant of AccordionItem.Header. The decoration can be placed before the rest of the header content.

Example:

<AccordionItem.Header>
  <AccordionItem.Marker />
  <AccordionItem.Decoration render={<Icon href={svgPlaceholder} />} />
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
</AccordionItem.Header>

Alternatively, the decoration can also be placed after the rest of the header content.

Example:

<AccordionItem.Header>
  <AccordionItem.Marker />
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
  <AccordionItem.Decoration render={<Icon href={svgPlaceholder} />} />
</AccordionItem.Header>

There can also be multiple decorations if passed as children under AccordionItem.Decoration.

Example:

<AccordionItem.Header>
  <AccordionItem.Marker />
  <AccordionItem.Decoration>
    <Icon href={svgPlaceholder} />
    <Icon href={svgPlaceholder} />
  </AccordionItem.Decoration>
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
</AccordionItem.Header>

Additional props

• render

AccordionItem.Marker

Base element: <div>

The visual marker of the AccordionItem.Header content. While it can be placed before or after the rest of the content in AccordionItem.Header, it is recommended to place the marker before.

Example:

<AccordionItem.Header>
  <AccordionItem.Marker />
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
</AccordionItem.Header>

Alternatively, the marker can also be placed after the rest of the header content.

Example:

<AccordionItem.Header>
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
  <AccordionItem.Marker />
</AccordionItem.Header>

Pass an icon as a child to override the default chevron icon:

<AccordionItem.Header>
  <AccordionItem.Marker>
    <Icon href={svgPlaceholder} />
  </AccordionItem.Marker>
  <AccordionItem.Button>
    <AccordionItem.Label>Label</AccordionItem.Label>
  </AccordionItem.Button>
</AccordionItem.Header>

Additional props

• render

AccordionItem.Heading

Base element: <div>

A heading for wrapping AccordionItem.Button.

The render prop is required.

Example:

<AccordionItem.Header>
  <AccordionItem.Marker />
  <AccordionItem.Heading render={<h2 />}>
    <AccordionItem.Button>
      <AccordionItem.Label>Label</AccordionItem.Label>
    </AccordionItem.Button>
  </AccordionItem.Heading>
</AccordionItem.Header>

render

Type: (props: P) => React.ReactNode | React.ReactElement (required)