Skip to content
Yuzur1ha Open

Component referenceDraft

Accordion

Accordion coordinates one or more collapsible sections with labelled triggers.

Updated

Design notes

Use Disclosure for an independent section. Expansion indicators and focus states communicate interaction without scaling the whole row.

Playground

Playgrounddemo.tsx

One section at a time. Open another section or collapse this one.

Multiple sections

Square edges, shared tokens and quiet motion.

content/components/accordion/demo.tsx

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@yuzur1ha/ui"
export function AccordionDemo() {
  return (
    <>
      <Accordion type="single" collapsible defaultValue="overview">
        <AccordionItem value="overview">
          <AccordionTrigger>Overview</AccordionTrigger>
          <AccordionContent>
            One section at a time. Open another section or collapse this one.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="details">
          <AccordionTrigger>Details</AccordionTrigger>
          <AccordionContent>
            The triggers support arrow keys, Home, End, Enter and Space.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="future" disabled>
          <AccordionTrigger>Unavailable section</AccordionTrigger>
          <AccordionContent>This section is disabled.</AccordionContent>
        </AccordionItem>
      </Accordion>
      <p className="demo-label">Multiple sections</p>
      <Accordion type="multiple" defaultValue={["appearance"]}>
        <AccordionItem value="appearance">
          <AccordionTrigger>Appearance</AccordionTrigger>
          <AccordionContent>
            Square edges, shared tokens and quiet motion.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="interaction">
          <AccordionTrigger>Interaction</AccordionTrigger>
          <AccordionContent>
            Open sections stay open until you close them.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </>
  )
}

API

Accordion

Radix accordion root. Set type="single" for one open item or "multiple" for an array of open items. Native div attributes are forwarded.

AccordionProps
PropertyTypeRequiredDefaultDescription
type"multiple" | "single"Yes—Required state mode. single uses string values; multiple uses string arrays.
valuestring | string[]No—Controlled open item value (single) or values (multiple).
defaultValuestring | string[]No—Initial open item value or values when uncontrolled.
onValueChange((value: string) => void) | ((value: string[]) => void)No—Called with a string in single mode or a string array in multiple mode.
collapsiblebooleanNofalseIn single mode, allow the currently open item to close. Not used in multiple mode.
disabledbooleanNo—Disable all triggers in this accordion.
orientation("vertical" | "horizontal")No"vertical"Layout and keyboard navigation axis.
dir("ltr" | "rtl")No—Text and keyboard direction: ltr or rtl.
childrenReactNodeNo—Content rendered inside the component.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
asChildbooleanNo—Render through one child element instead of the default element. The child must forward its ref and accept the supplied props.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

AccordionItem

An accordion item with a stable value unique within its root. Native div attributes are forwarded.

AccordionItemProps
PropertyTypeRequiredDefaultDescription
valuestringYes—Stable, non-empty item identifier unique within the accordion.
disabledbooleanNo—Disable this item’s trigger.
childrenReactNodeNo—Content rendered inside the component.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
asChildbooleanNo—Render through one child element instead of the default element. The child must forward its ref and accept the supplied props.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

AccordionTrigger

A native button inside an accordion heading. The component owns its label and chevron layout; asChild is not supported.

AccordionTriggerProps
PropertyTypeRequiredDefaultDescription
childrenReactNodeNo—Content rendered inside the component.
disabledbooleanNo—Disables the native control.
onClickMouseEventHandler<HTMLButtonElement>No—Native activation handler.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLButtonElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

AccordionContent

Expandable accordion panel with an inner spacing wrapper. Native attributes and ref apply to the outer panel.

AccordionContentProps
PropertyTypeRequiredDefaultDescription
childrenReactNodeNo—Content rendered inside the component.
forceMounttrueNo—Keep the Radix content mounted for externally managed visibility or animation. The consumer must manage its closed presentation.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.