Аккордеон (accordion) — это интерактивный элемент интерфейса, позволяющий пользователю раскрывать по требованию отдельные блоки информации, организованные в компактные секции.

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

По умолчанию аккордеон поддерживает раскрытие только одной секции за раз, но при необходимости можно включить раскрытие всех секции.

При необходимости можно заблокировать раскрытие секции, используя ее неактивное состояние.

Содержимое внутри секции можно расположить внутри шапки секции, а также внутри области контента.

Для шапки секции есть возможность дополнительно включать иконку, описание, левый и правый бейджи, а также дополнительные действия (с использованием Icon Button).

Наполнение этой области может быть любым.

Кнопки, выпадающие меню и элементы формы можно размещать в шапке секции рядом с триггером, а также внутри области контента. Размещайте их рядом с триггером, но не внутри него: триггер имеет роль button, и вложение в него фокусируемых элементов нарушает доступность. Enter и Space раскрывают и сворачивают секцию только когда фокус находится на самом триггере.

• Каждый раздел аккордеона должен иметь четкий и информативный заголовок, который точно отражает содержимое. Это поможет пользователям быстро найти нужную информацию.
• Разделы аккордеона должны быть организованы в логической последовательности. Это может быть алфавитный порядок, иерархическая структура или группировка по темам.