Navigation@knitui/components

Accordion

Accordion shows collapsible content panels. Compose Accordion.Item → Accordion.Control + Accordion.Panel. Single-open by default; pass multiple for several open at once. variant styles the container, chevronPosition/chevron control the indicator, and order promotes each control to a real heading level.

WebiOSAndroid6 style slots14 own props12 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

variant

chevronPosition

multiple

false

disableChevronRotation

false

radius

Playground

<Accordion
  variant="default"
  chevronPosition="right"
  multiple={false}
  disableChevronRotation={false}
  defaultValue="apples"
/>

Examples

Variants

Each container variant.

Loading example…

VariantsSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Multiple

Multiple panels open at once.

Loading example…

MultipleSource Storybook

Chevron Left

Chevron pinned to the left of the label.

Loading example…

Chevron LeftSource Storybook

Custom Chevron

A custom chevron glyph replaces the default.

Loading example…

Custom ChevronSource Storybook

With Icons

An icon to the left of each label.

Loading example…

With IconsSource Storybook

Disabled Control

A disabled control cannot be toggled.

Loading example…

Disabled ControlSource Storybook

Heading Order

order promotes each control to a real heading level for screen readers.

Loading example…

Heading OrderSource Storybook

Controlled

Controlled — the open item is owned by the parent.

Loading example…

ControlledSource Storybook

Sizes

Representative size keys — controls scale the header height and label font.

Loading example…

SizesSource Storybook

Styles

Per-slot styles targets individual parts — here the control, label, and panel.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`chevron`	`ReactNode`	—	Custom chevron icon.
`chevronIconSize`	`string \| number \| undefined`	—	Size of the default chevron glyph; ignored when a custom `chevron` is set. When unset the glyph keeps the kit's default size (14px) — a deliberate divergence from Mantine's 16 so a plain `<Accordion>` is pixel-identical.
`chevronPosition`	`AccordionChevronPosition \| undefined` left · right	`'right'`	Position of the chevron.
`chevronSize`	`string \| number \| undefined`	`'auto'`	Size of the chevron container — gives every chevron a fixed centered slot.
`children`	`ReactNode`	—	`Accordion.Item` children.
`defaultValue`	`AccordionValue<Multiple> \| undefined`	—	Uncontrolled initial value.
`disableChevronRotation`	`boolean \| undefined`	`false`	Disable the default chevron rotation animation.
`disabled` system	`boolean \| undefined`	—
`keepMounted`	`boolean \| undefined`	`true`	Keep inactive panels mounted (hidden).
`multiple`	`Multiple \| undefined`	`false`	Allow multiple items open simultaneously.
`onChange`	`((value: AccordionValue<Multiple>) => void) \| undefined`	—	Called when value changes.
`order`	`AccordionHeadingOrder \| undefined`	`undefined`	Heading level at which `Accordion.Control` is announced — renders the control inside `role="heading"` + `aria-level={order}`. When unset, the control has no heading semantics (a plain pressable).
`radius` system	`string \| number \| undefined`	`'md'`	Corner rounding.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	`'md'`	Control size — scales the header `paddingHorizontal`/`minHeight`, the label font, and the default chevron glyph off the shared `controlMetrics` row.
`styles` system	`SlotStyles<AccordionStyles> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Slots: `root` / `item` / `control` / `label` / `chevron` / `panel`. Distributed through context so it reaches every nested part. Explicit inline props on a composed part always win.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`transitionDuration`	`number \| undefined`	`200`	Panel expand/collapse transition duration in ms.
`transitionTimingFunction`	`string \| undefined`	`'ease'`	Panel expand/collapse transition timing function.
`value`	`AccordionValue<Multiple> \| undefined`	—	Controlled value.
`variant` system	`AccordionVariant \| undefined` default · contained · filled · separated	`'default'`	Visual style.

Style slots

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

Slot	Usage
`chevron`	`styles={{ chevron: { … } }}`
`control`	`styles={{ control: { … } }}`
`item`	`styles={{ item: { … } }}`
`label`	`styles={{ label: { … } }}`
`panel`	`styles={{ panel: { … } }}`
`root`	`styles={{ root: { … } }}`

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.