Skip to Content
MavKitOne is in beta. @mav-labs-inc/mavkit-react is not public packages yet.
ComponentsAccordion

Accordion

A disclosure list built from Accordion + AccordionItem, following the WAI-ARIA Accordion keyboard pattern (Arrow Up/Down, Home, End move focus between triggers).

Usage

import { Accordion, AccordionItem } from '@mav-labs-inc/mavkit-react'
 
<Accordion mode="single">
  <AccordionItem label="What is X?" defaultOpen>
    Answer…
  </AccordionItem>
  <AccordionItem label="How does Y work?">Answer…</AccordionItem>
</Accordion>

Examples

Basic

mode="single" closes other items when one opens; the default mode="multiple" lets any number stay open at once.

A CSS framework with framework-native React, Angular, and vanilla JS wrappers sharing one design system.

Variants

No outer border or rounding.

Each item renders as its own card.

Props

Accordion

PropTypeDefaultDescription
mode'single' | 'multiple''multiple''single' closes other items when one opens.
variant'default' | 'flush' | 'separated''default'Visual style.
size'sm' | 'md' | 'lg''md'
ariaLabelstring—aria-label for the accordion group.
classNamestring—
childrenReactNode—AccordionItem elements.

AccordionItem

Must be rendered inside Accordion.

PropTypeDefaultDescription
label*ReactNode—Trigger label.
subtitleReactNode—Muted secondary text next to the label.
openboolean—Controlled open state — pair with onOpenChange.
defaultOpenbooleanfalseInitial open state when uncontrolled.
onOpenChange(open: boolean) => void—
disabledbooleanfalse
childrenReactNode—Panel content.
Last updated on
UtilitiesAuto Complete