Accordion

Overview

The Accordion component is a specialized component that allows users to hide and show content. It's built on top of the Collapsible primitive and follows the WAI-ARIA design pattern.

Default

import * as UI from "@iyk/ui"

export default () => (
  <UI.AccordionV2.Root type="single">
    <UI.AccordionV2.Item value="one">
      <UI.AccordionV2.Header>
        <UI.AccordionV2.Trigger>Section 1</UI.AccordionV2.Trigger>
      </UI.AccordionV2.Header>
      <UI.AccordionV2.Content>
        <div className="pb-4">
          <p>Content 1</p>
        </div>
      </UI.AccordionV2.Content>
    </UI.AccordionV2.Item>

    <UI.AccordionV2.Item value="two">
      <UI.AccordionV2.Header>
        <UI.AccordionV2.Trigger>Section 2</UI.AccordionV2.Trigger>
      </UI.AccordionV2.Header>
      <UI.AccordionV2.Content>
        <div className="pb-4">
          <p>Content 2</p>
        </div>
      </UI.AccordionV2.Content>
    </UI.AccordionV2.Item>

    <UI.AccordionV2.Item value="three">
      <UI.AccordionV2.Header>
        <UI.AccordionV2.Trigger>Section 3</UI.AccordionV2.Trigger>
      </UI.AccordionV2.Header>
      <UI.AccordionV2.Content>
        <div className="pb-4">
          <p>Content 3</p>
        </div>
      </UI.AccordionV2.Content>
    </UI.AccordionV2.Item>
  </UI.AccordionV2.Root>
)

Multiple

import * as UI from "@iyk/ui"

export default () => (
  <UI.AccordionV2.Root type="multiple">
    <UI.AccordionV2.Item value="one">
      <UI.AccordionV2.Header>
        <UI.AccordionV2.Trigger>Section 1</UI.AccordionV2.Trigger>
      </UI.AccordionV2.Header>
      <UI.AccordionV2.Content>
        <div className="pb-4">
          <p>Content 1</p>
        </div>
      </UI.AccordionV2.Content>
    </UI.AccordionV2.Item>

    <UI.AccordionV2.Item value="two">
      <UI.AccordionV2.Header>
        <UI.AccordionV2.Trigger>Section 2</UI.AccordionV2.Trigger>
      </UI.AccordionV2.Header>
      <UI.AccordionV2.Content>
        <div className="pb-4">
          <p>Content 2</p>
        </div>
      </UI.AccordionV2.Content>
    </UI.AccordionV2.Item>

    <UI.AccordionV2.Item value="three">
      <UI.AccordionV2.Header>
        <UI.AccordionV2.Trigger>Section 3</UI.AccordionV2.Trigger>
      </UI.AccordionV2.Header>
      <UI.AccordionV2.Content>
        <div className="pb-4">
          <p>Content 3</p>
        </div>
      </UI.AccordionV2.Content>
    </UI.AccordionV2.Item>
  </UI.AccordionV2.Root>
)

Controlled

import * as UI from "@iyk/ui"
import * as React from "react"

export default () => {
  const [value, setValue] = React.useState<string[]>([])
  return (
    <div className="w-full flex flex-col gap-4">
      <UI.AccordionV2.Root value={value} onValueChange={setValue} type="multiple">
        <UI.AccordionV2.Item value="one">
          <UI.AccordionV2.Header>
            <UI.AccordionV2.Trigger>Section 1</UI.AccordionV2.Trigger>
          </UI.AccordionV2.Header>
          <UI.AccordionV2.Content>
            <div className="pb-4">
              <p>Content 1</p>
            </div>
          </UI.AccordionV2.Content>
        </UI.AccordionV2.Item>

        <UI.AccordionV2.Item value="two">
          <UI.AccordionV2.Header>
            <UI.AccordionV2.Trigger>Section 2</UI.AccordionV2.Trigger>
          </UI.AccordionV2.Header>
          <UI.AccordionV2.Content>
            <div className="pb-4">
              <p>Content 2</p>
            </div>
          </UI.AccordionV2.Content>
        </UI.AccordionV2.Item>

        <UI.AccordionV2.Item value="three">
          <UI.AccordionV2.Header>
            <UI.AccordionV2.Trigger>Section 3</UI.AccordionV2.Trigger>
          </UI.AccordionV2.Header>
          <UI.AccordionV2.Content>
            <div className="pb-4">
              <p>Content 3</p>
            </div>
          </UI.AccordionV2.Content>
        </UI.AccordionV2.Item>
      </UI.AccordionV2.Root>
      <p>Open items: {value.length > 0 ? value.join(", ") : "none"}</p>
    </div>
  )
}

Features

Accessibility

Follows WAI-ARIA design pattern for accordions, ensuring keyboard navigation and screen reader support.

Animation

Smooth height animation when expanding/collapsing sections.

Multiple

Support for single or multiple expanded sections.

Controlled

Can be controlled externally through props.

API