Components

Accordion

A vertically stacked set of headers that each reveal a section of content, letting users expand only what they need.

Basic usage

Use type="single" with collapsible so only one section is open at a time. Every AccordionItem needs a unique value.

Comitor is a gold-and-ink design system for building polished, accessible product interfaces with React and Tailwind CSS.

Set type="multiple" to let several sections stay open at once. In this mode defaultValue takes an array of item values.

Orders ship within two business days via tracked courier.

Unused items can be returned within 30 days for a full refund.

Add disabled to an individual AccordionItem to lock it. It is skipped during keyboard navigation and dimmed to 50% opacity.

Props below are set on the root Accordion element, except value and disabled which are also accepted on each AccordionItem.

Prop	Type	Default	Description
`type`required	'single' \| 'multiple'	`—`	Whether one or several items can be open at the same time.
`collapsible`	boolean	`false`	When type is 'single', allows closing the open item so all items can be collapsed.
`defaultValue`	string \| string[]	`—`	The item(s) open by default in uncontrolled mode. Use an array when type is multiple.
`value`	string \| string[]	`—`	The controlled open item(s). Pair with onValueChange.
`onValueChange`	(value: string \| string[]) => void	`—`	Callback fired when the open item(s) change.
`disabled`	boolean	`false`	Disables the whole accordion, or a single AccordionItem when set on the item.
`dir`	'ltr' \| 'rtl'	`'ltr'`	Reading direction, affecting arrow-key navigation.
`className`	string	`—`	Additional Tailwind classes, accepted on every part.

Follows the WAI-ARIA Accordion pattern — each trigger is a <button> inside a heading, wired with aria-expanded and aria-controls.
Fully keyboard operable: Enter and Space toggle a section, while Arrow keys, Home, and End move focus between triggers.
Each trigger shows a brand gold focus-visible ring on keyboard focus, and the chevron rotates to reflect the open or closed state.
Disabled items set aria-disabled and are removed from the keyboard navigation order.