Efniv0.1

Components

Accordion

Progressively discloses content. Built on Base UI — pass multiple to allow more than one panel at a time.

When to useto compact a list of long-tail sections where the reader wants only one or two open at a time.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@ravnhq/efni/accordion"

Single (default)

<Accordion>
  <AccordionItem value="what">
    <AccordionTrigger>What is Efni?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

<Accordion multiple>…</Accordion>

Accessibility

KeyAction
Enter / SpaceToggle the focused item.
ArrowDown / ArrowUpMove focus between triggers.
Home / EndJump to the first or last trigger.
  • Triggers render as native <button>s with aria-expanded and aria-controls wired for you.
  • Each item's value must be unique; it doubles as the DOM id root.

Guidelines

Do
  • Order items by likelihood — the most-clicked first.
  • Keep trigger labels short and question-shaped when reasonable.
  • Use multiple when items are independent, single when they're alternatives.
Don't
  • Don't nest accordions — pick a different disclosure pattern.
  • Don't use it for primary navigation — use Sidebar/Tabs.
  • Don't hide critical information behind an accordion by default.

Props

PropTypeDefaultDescription
multiplebooleanfalseWhether multiple items can be open at the same time.
valueAccordionValue<Value>—The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the defaultValue prop instead.
defaultValueAccordionValue<Value>—The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the value prop instead.
onValueChange((value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) => void)—Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.
…propsAccordionPrimitive.Root.Props—Everything Accordion passes to the element it renders.