Accordion

Accordion — составной компонент для группы раскрывающихся секций с общей моделью состояния на корне и частями уровня элемента для заголовков, триггеров, иконок и содержимого.

Storybook Исходники Figma

Пропсы корня

Проп	Тип	По умолчанию
`className`	`string`	—
Необязательный собственный CSS-класс для обёртки аккордеона. Полезен для переопределения стилей или локальной стилизации.
`size`	`AccordionSize`	`'md'`
Определяет размер аккордеона. Влияет на отступы и размер шрифта.
`children`	`ReactElement<AccordionItemProps> \| ReactElement<AccordionItemProps>[]`	—
Элементы аккордеона для рендера. Должны быть одним или несколькими компонентами `<AccordionItem>`. Принимает один элемент или массив элементов.
`opened`	`string[]`	—
ID открытых сейчас элементов. Если задан, включает контролируемый режим.
`onChangeOpened`	`(opened?: string[]) => void`	—
Вызывается при изменении ID открытых элементов.
`defaultOpened`	`string[]`	`[]`
Массив `id` элементов, которые должны быть открыты по умолчанию при монтировании аккордеона.
`multiple`	`boolean`	`false`
Позволяет одновременно открывать несколько элементов аккордеона. Если `false`, открытым может быть только один элемент (классическое поведение аккордеона).

Также принимает все атрибуты <ul>.

Дочерние части

AccordionItem: один раскрывающийся элемент со стабильным value.
AccordionHeader: семантическая обёртка-заголовок для каждого элемента.
AccordionTrigger: кнопка-переключатель элемента.
AccordionContent: раскрывающаяся область содержимого.
AccordionIcon: необязательный визуальный индикатор состояния.

`AccordionItem`

Проп	Тип	По умолчанию
`open`	`boolean`	—
Управляет тем, открыт (развёрнут) ли элемент аккордеона. Если задан, компонент становится контролируемым.
`onChangeOpen`	`(value: string, state: boolean) => void`	—
Колбэк, вызываемый при изменении состояния открытия.
`value`обязательный	`string`	—
Уникальный идентификатор этого элемента аккордеона. Используется для управления состоянием открытия в группе аккордеона.
`size`	`AccordionSize`	—
Управляет размером триггера и влияет на типографику и интервалы. Если не задан, берётся значение из контекста.
`contentId`	`string`	—
ID элемента сворачиваемого содержимого. Используется, чтобы: связать триггер и содержимое атрибутами доступности (`aria-controls`); открыть развёрнутую область вспомогательным технологиям; дать стабильный идентификатор для тестов и запросов к DOM. Если не задан, ID генерируется внутри.

Также принимает все атрибуты <li>.

`AccordionTrigger`

Проп	Тип	По умолчанию
`asChild`	`boolean`	—
Если true, рендерит триггер как дочерний компонент через `Slot` (например, `<a>` или `<div>`). Это позволяет задать собственную семантику или стили, сохранив поведение сворачивания.
`ref`	`Ref<HTMLButtonElement>`	—
Ref, передаваемый на нативный элемент триггера (обычно кнопку).

Также принимает все HTML-атрибуты.

`AccordionContent`

Проп	Тип	По умолчанию
`ref`	`Ref<HTMLDivElement>`	—
Ref на корневой div содержимого.

Также принимает все атрибуты <div>.

`AccordionHeader`

Проп	Тип	По умолчанию
`as`	`HeadingAs`	—
HTML-тег заголовка для рендера (например, 'h1', 'h2'). Определяет семантическую структуру и уровень для доступности.
`size`	`HeadingSize`	—
Визуальный размер заголовка, независимый от тега `as`. Обычно соответствует типографической шкале дизайн-системы. Принимает значения от 1 (наименьший) до 11 (наибольший).
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Насыщенность шрифта текста заголовка. 400: обычный; 500: средний; 600: полужирный; 700: жирный; 900: сверхжирный
`ref`	`Ref<HTMLHeadingElement>`	—
Ref на нативный HTML-элемент заголовка. Полезен для доступа к DOM или управления фокусом.

Также принимает все атрибуты <h1>–<h6>.

`AccordionIcon`

Проп	Тип	По умолчанию
`size`	`IconSize`	—
Предопределённый токен размера иконки. Может быть переопределён явными шириной и высотой.
`ref`	`Ref<SVGSVGElement>`	—
Ref на SVG-элемент
`strokeWidth`	`number`	—
Толщина обводки линий и фигур SVG (в px или pt).
`children`	`ReactNode`	—
Содержимое иконки (обязательно). Принимает: иконки из `~/icons`; собственный встроенный SVG; компоненты иконок сторонних библиотек (например, Lucide, Tabler)

Также принимает все HTML-атрибуты.

Типы

AccordionProps
AccordionItemProps
AccordionHeaderProps
AccordionTriggerProps
AccordionContentProps
AccordionIconProps

Модель состояния

Accordion может быть неконтролируемым через defaultOpened или контролируемым через opened и onChangeOpened.
multiple={false} ведёт себя как классический аккордеон: открытие одного элемента закрывает остальные.
multiple={true} позволяет корню работать как группа независимых раскрывающихся блоков.
Для продвинутых обёрток и собственных композиций доступны useAccordionContext и useAccordionItemContext.