Accordion

Accordion использует поведение Bits UI и визуальный слой «42».

Статус: stable · в системе с 2026-06 · интерактивность: always (всегда)

Когда использовать

Справка, FAQ и вторичные настройки — контент, не нужный сразу.
Экономия вертикали в длинной форме или статье.

Не использовать:

Основной контент или главное действие — их не прячут в закрытый блок.
Взаимоисключающие разделы одного уровня — это табы (в каноне их пока нет).

Конструктор

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

Что это

Список раскрывающихся секций для справки, настроек и длинных описаний.

Когда использовать

Недоступная секция

Один открытый блок

Что это

Список раскрывающихся секций для справки, настроек и длинных описаний.

Когда использовать

Состояния

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Accordion from "$lib/ui/Accordion.svelte";

let value = $state("overview");

const items = [
  {
    value: "overview",
    title: t("Что это"),
    content: t("Список раскрывающихся секций для справки, настроек и длинных описаний."),
  },
  {
    value: "usage",
    title: t("Когда использовать"),
    content: t("Когда нужно показать несколько независимых блоков и оставить экран спокойным."),
  },
  {
    value: "states",
    title: t("Состояния"),
    content: t("Открыто, закрыто, disabled, пустой список и управляемое значение."),
  },
];
</script>

<Accordion {items} bind:value />

Несколько открытых блоков

Что это

Когда использовать

Когда нужно показать несколько независимых блоков и оставить экран спокойным.

Состояния

Открыто, закрыто, disabled, пустой список и управляемое значение.

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Accordion from "$lib/ui/Accordion.svelte";

let value = $state(["usage", "states"]);

const items = [
  {
    value: "overview",
    title: t("Что это"),
    content: t("Список раскрывающихся секций для справки, настроек и длинных описаний."),
  },
  {
    value: "usage",
    title: t("Когда использовать"),
    content: t("Когда нужно показать несколько независимых блоков и оставить экран спокойным."),
  },
  {
    value: "states",
    title: t("Состояния"),
    content: t("Открыто, закрыто, disabled, пустой список и управляемое значение."),
  },
];
</script>

<Accordion {items} type="multiple" bind:value />

Disabled и empty

Что это

Список раскрывающихся секций для справки, настроек и длинных описаний.

Когда использовать

Состояния

Недоступная секция

Разделы появятся после выбора сценария.

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Accordion from "$lib/ui/Accordion.svelte";

const items = [
  {
    value: "overview",
    title: t("Что это"),
    content: t("Список раскрывающихся секций для справки, настроек и длинных описаний."),
  },
  {
    value: "usage",
    title: t("Когда использовать"),
    content: t("Когда нужно показать несколько независимых блоков и оставить экран спокойным."),
  },
  {
    value: "states",
    title: t("Состояния"),
    content: t("Открыто, закрыто, disabled, пустой список и управляемое значение."),
  },
  {
    value: "locked",
    title: t("Недоступная секция"),
    content: t("Этот блок не раскрывается."),
    disabled: true,
  },
];
</script>

<Accordion {items} value="overview" />

<Accordion items={[]} emptyMessage={t("Разделы появятся после выбора сценария.")} />