Accordion

Default

The title text column is the alignment reference: the hover highlight and hit area extend 8px (--accordion-hover-inset) beyond the component box without shifting layout.

Loading preview

Filled

Compact filled headers with panels outside the filled surface.

Loading preview

Outlined

Container border with dividers between items. The first example is single-open (multiple={false}), the second places the indicator at the end.

Loading preview

Inline indicator

Loading preview

Atom Components

Loading preview

APIs

Accordion

Accordion properties

className

string

classNames

AccordionClassNames

defaultValue

string[]

gap

number

hideIndicator

boolean

indicatorPlacement

'end' | 'start' | 'inline'

Defaults to "start".

items

AccordionItemType[]

keepMounted

boolean

multiple

boolean

Defaults to true.

onValueChange

(value: string[]) => void

ref

null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>

style

CSSProperties

styles

AccordionStyles

value

string[]

variant

'filled' | 'outlined' | 'borderless'

Defaults to "borderless".

AccordionItemType

Property	Description	Type	Default
key	Unique value identifying the item	string	-
title	Header title	ReactNode	-
children	Panel content	ReactNode	-
action	Actions shown at the header end on hover	ReactNode	-
alwaysShowAction	Show the action without hovering	boolean	false
disabled	Whether the item is disabled	boolean	false

Indicator placement

• start (default) — chevron before the title; panel content is indented to align with the title.
• inline — small filled arrow right after the title; no panel indent, no hover inset and no trailing panel padding; a hover action adds 4px block padding so a 24px action yields the 32px sidebar header (the compact sidebar look).
• end — chevron pushed to the trailing edge of the header.

Variants

• borderless (default) — flush look; hover highlight bleeds 8px outside via --accordion-hover-inset.
• filled — compact filled headers; expanded content remains outside the filled surface.
• outlined — rounded container border with 1px dividers between items.