Accordion

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Expand related details under their headings. In single-item mode, the closing and opening panels swap with a height and fade transition. The closing panel turns inert, so its inputs can't be used mid-transition. With reduced motion, panels switch instantly.

Don't hide all essential information in collapsed panels. Keep key facts visible outside them. Don't nest buttons or links inside a Trigger. Place them in the Panel instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root → Item → Header(Trigger + SVG) + Panel(content body)

Keyboard and accessibility

Tab and Shift+Tab move through each Trigger and the inputs in open panels. Enter or Space expands a panel. Base UI 1.9 dropped arrow-key roving focus for Accordion.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Accordion } from '@surflane/ui'

<Accordion.Root defaultValue={['identity']}>
  <Accordion.Item value='identity'>
    <Accordion.Header>
      <Accordion.Trigger>Identity controls</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>Deployment details</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens