Ship-It Designv0.0.20

GitHub

Accordion

Vertically stacked, collapsible sections. Use type="single" for one-open-at-a-time (FAQ pages); "multiple" when sections are independent (filter groups, listing detail).

Default — single#

Loading…

Multiple sections open#

Loading…

With leading icons#

Loading…

Props#

Accordion#

Props for Accordion
PropTypeDefaultDescription
asChildboolean | undefined

AccordionTrigger#

Props for AccordionTrigger
PropTypeDefaultDescription
leadingIconstring | undefinedOptional icon name rendered to the left of the trigger label.

Accessibility#

  • Each section's trigger toggles aria-expanded and exposes the panel via aria-controls. Radix handles the wiring.
  • Keyboard: Up / Down move between triggers, Home / End jump to first / last, Enter / Space toggles.
  • Respects prefers-reduced-motion — the expand/collapse animation collapses to 1ms.