Accordion

import { Accordion } from "@knitui/components";

Usage

Compose Accordion.Item with an Accordion.Control and an Accordion.Panel. The item's value is its identity — that is what value / defaultValue refer to.

import { Accordion } from "@knitui/components";

<Accordion defaultValue="shipping">
  <Accordion.Item value="shipping">
    <Accordion.Control>Shipping</Accordion.Control>
    <Accordion.Panel>Ships in 2–3 days.</Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item value="returns">
    <Accordion.Control>Returns</Accordion.Control>
    <Accordion.Panel>30 days, no questions.</Accordion.Panel>
  </Accordion.Item>
</Accordion>;

multiple lets several sections be open at once — and changes the shape of value from a string to an array, which TypeScript enforces for you.

chevronPosition="left" moves the indicator, chevron replaces it, and disableChevronRotation keeps it still if your own glyph shouldn't spin.

Panels stay mounted by default (keepMounted), so form state inside a closed section survives. Set keepMounted={false} when a panel is expensive.

When to use something else

• Views that replace each other rather than stacking → Tabs
• A single show-more/show-less region → Collapse or Spoiler

Examples

Props

Style slots

Every part of Accordion can be styled through the styles prop. Explicit props on the component always win over slot styles.

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.

Accessibility

Each control is a role="button" with aria-expanded reflecting its state, and each panel is a role="region", which is the ARIA disclosure pattern.

Controls are made focusable and operable through the shared useKeyboardActions hook, since the control frame is a styled Box rather than a native <button>.

Set order when the accordion is part of the page's document outline. It wraps each control in role="heading" with a matching aria-level, which is what lets screen-reader users jump between sections with heading navigation instead of tabbing through every control. Without it the controls are buttons with no heading semantics — fine for a compact widget, a real loss for an FAQ page. Pick the level that fits the surrounding headings:

<Accordion order={3}>{/* controls become level-3 headings */}</Accordion>

Arrow keys deliberately do not move between controls: ARIA lists that as optional for accordions, and Tab already reaches every control in order.