Skip to content
StrataKit Docs

unstable_AccordionItem API

Component status:
deprecated

Import

Section titled “Import”
import { unstable_AccordionItem as AccordionItem } from "@stratakit/structures";
// OR
import * as AccordionItem from "@stratakit/structures/unstable_AccordionItem";

AccordionItem.Root Deprecated

Section titled “AccordionItem.Root Deprecated ”
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

Section titled “defaultOpen”
Type: boolean | undefined (optional)
Default: false

The accordion item’s initial open state.

open

Section titled “open”
Type: boolean | undefined (optional)
Default: false

The accordion item’s controlled open state.

setOpen

Section titled “setOpen”
Type: ((open: boolean) => void) | undefined (optional)

Callback fired when the accordion item is opened.

Should be used with the open prop.

Additional props

Section titled “Additional props”

AccordionItem.Header Deprecated

Section titled “AccordionItem.Header Deprecated ”
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

Section titled “Additional props”

AccordionItem.Button Deprecated

Section titled “AccordionItem.Button Deprecated ”
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

Section titled “Additional props”

AccordionItem.Label Deprecated

Section titled “AccordionItem.Label Deprecated ”
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

Section titled “Additional props”

AccordionItem.Decoration Deprecated

Section titled “AccordionItem.Decoration Deprecated ”
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

Section titled “Additional props”

AccordionItem.Marker Deprecated

Section titled “AccordionItem.Marker Deprecated ”
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

Section titled “Additional props”

AccordionItem.Content Deprecated

Section titled “AccordionItem.Content Deprecated ”
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

Section titled “Additional props”

AccordionItem.Heading Deprecated

Section titled “AccordionItem.Heading Deprecated ”
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

Section titled “render”
Type: (props: P) => React.ReactNode | React.ReactElement (required)