Skip to content
← Inventory

Accordion

Collapsible panel container that wraps Radix Accordion, supporting one (single) or several (multiple) open items. Works controlled (value) or uncontrolled (defaultValue); compose with AccordionItem, AccordionTrigger, and AccordionContent.

300 × 600 mm field tile, 10 mm thick, with book-matched veining.

Seal on installation; clean with pH-neutral stone soap.

Typically stocked; 3–5 day lead time.

Usage

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

Best practices

  • Set type="single" for one-at-a-time panels or type="multiple" to allow several open at once — this Radix prop is required, not defaulted.

  • Reach for Collapsible instead when there is a single expandable region — Accordion is for a set of grouped items keyed by value.

  • Children must be AccordionItems (each with AccordionTrigger/AccordionContent); the item's value is what value/defaultValue match against.

Props

PropTypeDefaultDescription
variant"default" | "outline" | "solid" | null | undefined
indicator"arrow" | "plus""arrow"

Expand/collapse indicator icon.

Also exports

  • constaccordionAnatomy
  • componentAccordionContent
  • componentAccordionItem
  • componentAccordionTrigger

Anatomy

Accordion

accordion

Expandable content sections

AccordionItem

accordion-item

Single collapsible section

AccordionTrigger

accordion-trigger

Button to toggle content visibility

AccordionContent

accordion-content

Collapsible content area

Composition

Builds on

Icon