Accordion

Collapsible content panels for dense info.

Returns within 30 days. Refunds in 5–7 business days.

Contract

Overview

Machine-readable contract from Component Spec.

component: accordionexport: Accordionversion: 1recipe: accordiontokens.visual: accordionattributes: data-refineui=accordion

Anatomy

Part	data-refineui
root	accordion
item	accordion-item
trigger	accordion-trigger
panel	accordion-panel
content	accordion-content

Variants

Axis	Values
size	sm, md, lg
type	single, multiple

States

Scope	Category	Values
component	pseudo	focus-visible
component	component	data-state: open, closed
component	environment	forced-colors, dir, prefers-contrast
accordion-item	component	data-state: open, closed
accordion-trigger	pseudo	focus-visible

Accessibility

Slot	Element	Role	Required attributes	Relationships
accordion-trigger	button	button	aria-expanded: required=true, type: boolean; aria-controls: required=true, type: string	aria-controls → accordion-panel.id (required=true)
accordion-panel	—	region	aria-labelledby: required=true, type: string	aria-labelledby → accordion-trigger.id (required=true)

Keyboard

Key	Action	Native
ArrowDown	next-trigger	—
ArrowUp	previous-trigger	—
Home	first-trigger	—
End	last-trigger	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	roving	false

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Returns within 30 days. Refunds in 5–7 business days.

Recipe → Tokens

Slot bindings for variant="default" — declared in accordion.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
item	—	background	accordion.content.background	backgroundPrimaryHover	neutral100	neutral850	bg-refineui-alias-background-primary-hover
trigger	—	foreground	accordion.trigger.foreground	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
content	—	foreground	accordion.content.foreground	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-secondary

Component token trace

All paths in token-trace-v2.json prefixed with accordion.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
accordion.content.background	backgroundPrimaryHover	neutral100	neutral850	#F5F5F5	#222222
accordion.content.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
accordion.content.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
accordion.item.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
accordion.trigger.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
accordion.trigger.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
accordion.trigger.foreground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF

Installation

npm install @refineui/react @refineui/tokens

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@refineui/react";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is RefineUI?</AccordionTrigger>
    <AccordionContent>
      RefineUI is a design system and component library.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>
      Run: bun add @refineui/react @refineui/tokens
    </AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  {/* Multiple panels can be open */}
</Accordion>

<Accordion size="lg" value={openItem} onValueChange={setOpenItem}>
  {/* Controlled accordion */}
</Accordion>

Contract source: packages/react/spec/components/accordion.json — rendered by SpecRenderer above.