Accordion и Collapsible

Collapsible — один триггер и одна панель; Accordion — несколько пунктов с общей клавиатурой (single / multiple, опционально collapsible). У триггеров справа по умолчанию анимированная стрелка — свойство chevron; высота панели и поворот стрелки задаются motionDurationMs. У Accordion.Root есть variant и size. Справка — в шапке Документация → Accordion.

В превью с одной секцией включён collapsible (Accordion.Root collapsible). Второй клик по открытому заголовку закрывает панель — так видно анимацию высоты и стрелки; сравните блок скорость анимации ниже.

Примеры: Collapsible

Примеры: Accordion — single

Only one section stays open.

Примеры: Accordion — collapsible single

Click again to close — collapsible on single mode.

Примеры: Accordion — multiple

Open Alpha and Beta at the same time.

Примеры: стрелка — по умолчанию, без иконки, своя

Rotates smoothly when open.

Примеры: список внутри панели

Pack items
Print label
Hand off to carrier

Примеры: вложенный accordion

Detail for B.

Примеры: варианты (bordered, flush, soft, elevated)

variant="bordered" (default)

Bordered chrome.

variant="flush"

No outer border.

variant="soft"

Soft tinted shell.

variant="elevated"

Card shadow.

Примеры: размеры (sm, md, lg)

size="sm"

size="md"

size="lg"

Примеры: скорость анимации (motionDurationMs)

motionDurationMs={90}

motionDurationMs={280}

motionDurationMs={600}

Примеры: на тёмном / цветном фоне

Elevated accordion on a dark band

Panels stay legible on tinted layouts.

Markdown-справка — шапка Документация → Accordion.