Skip to content
Aback UI

Navigation

Accordion

Disclosure sections for FAQs and grouped settings, with full keyboard support.

StableUsed in Aback ToolsRegistry JSON (opens in a new tab)

Run the registry command for the component, then import the theme once in your global stylesheet. The source lands in your project and belongs to you.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add accordion

Writes components/ui/accordion.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";

API reference

Props and composition points for Accordion. Native element props pass through.

PropTypeDefaultDescription
type"single" | "multiple"NoneWhether one or several panels can be open at once. Required.
collapsiblebooleanfalseIn single mode, allows the open panel to close when activated again.
defaultValuestring | string[]NonePanels open on first render in uncontrolled mode.
value / onValueChangestring | string[] / (value) => voidNoneControlled open state. Use either the uncontrolled or controlled API.
forceMountbooleanNoneOn AccordionContent, keeps closed answers in the DOM for SEO. Pair with hidden styling.

Dependencies: radix-ui, @tabler/icons-react, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Each trigger is a real button inside a heading, with aria-expanded and aria-controls managed by Radix.
  • The trigger order forms a single tab stop; arrow keys, Home, and End move between headers.
  • Closed content is unmounted by default. Pass forceMount when the answer must exist in the initial HTML.
  • The chevron is decorative and hidden from assistive technology; the label alone names the control.

Keyboard

KeyAction
EnterorSpaceToggle the focused panel.
ArrowDownorArrowUpMove focus to the next or previous header.
HomeorEndMove focus to the first or last header.

Avoid fixed max heights on answers. The content animates from its measured height so long localized text is never clipped.

Used in production

The Aback products whose interfaces shaped this component.

Related