Accordion

A vertically stacked set of interactive headings that reveal or hide associated content.

Anatomy

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Trigger />
    <Accordion.Content />
  </Accordion.Item>
</Accordion.Root>

Usage

import { Accordion } from '@ivaldi/ui'
<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Section 1</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section 1</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Section 2</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section 2</p>
    </Accordion.Content>  
  </Accordion.Item>
</Accordion.Root>

Accordion.Root Props

Root component for the Accordion UI element. Provides the container for accordion items, managing their state and interactions.

PropTypeDefault
type*enum
value*string
defaultValuestring | string[]
onValueChangefunction
collapsibleboolean"false"
disabledboolean
orientationenum"vertical"
direnum
classNamestring
childrenReactNode
asChildboolean

Accordion.Content Props

Content component for an Accordion item. Renders the collapsible content section with smooth animations for expand/collapse transitions.

PropTypeDefault
classNamestring
childrenReactNode
asChildboolean
forceMounttrue

Accordion.Item Props

Individual item component within an Accordion. Represents a collapsible section that contains a trigger and content.

PropTypeDefault
disabledboolean
value*string
classNamestring
childrenReactNode
asChildboolean

Accordion.Trigger Props

Trigger component for an Accordion item. Renders a button that controls the expansion/collapse of the associated content. Includes an animated chevron icon that rotates based on the open state.

PropTypeDefault
typeenum
classNamestring
childrenReactNode
asChildboolean