Description

Description поясняет то, у чего нет собственного футера: группу контролов, блок формы, значение в сводке. Нейтральный тон повторяет описание поля, тон error — его ошибку, теми же токенами --c-control-desc и --c-control-error, поэтому пояснение вне поля и футер внутри него выглядят одинаково.

Статус: experimental · в системе с 2026-08 · интерактивность: none (нет)

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

Пояснение под группой контролов: что делает набор переключателей, зачем пара полей.
Ошибка уровня группы или блока: «выберите хотя бы один пункт» под чекбокс-набором.
Примечание к значению в сводке: условие списания под суммой.

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

Пояснение или ошибка конкретного поля — у Input, Select, Textarea есть свои description и error.
Системное сообщение о результате операции — это Alert с тоном и иконкой.
Подпись контрола или значения — это Label.

Альтернативы:

alert — системное сообщение с тоном и иконкой, а не тихое пояснение
label — имя контрола или значения, а не пояснение под ним
input — футер поля — пропсы description/error самого поля

Тона

Нейтральное пояснение и ошибка под группой контролов.

Creatives are grouped by placement.

Select at least one placement.

<!--
  🟢

  Два тона пояснения: нейтральный текст и ошибка. Геометрия одна — различается
  только цвет, тот же, что у описания и ошибки поля.
-->

<script>
import Description from "$lib/ui/Description.svelte";
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-2); max-width: 340px;">
	<Description>Creatives are grouped by placement.</Description>
	<Description tone="error">Select at least one placement.</Description>
</div>

Под группой

Пояснение под набором переключателей, у которого нет своего футера.

Placements

Десктоп Mobile In-app

Turn on the placements this campaign should run in.

<!--
  🟢

  Пояснение под группой переключателей, у которой нет своего футера: текст
  стоит сразу под тем, что поясняет.
-->

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

<div style="display: flex; flex-direction: column; gap: var(--sp-1); max-width: 340px;">
	<Label size="s">Placements</Label>
	<div style="display: flex; gap: var(--sp-1); color: var(--c-text-muted); font-size: var(--fs-s);">
		<span>{t("Desktop")}</span>
		<span>Mobile</span>
		<span>In-app</span>
	</div>
	<Description>Turn on the placements this campaign should run in.</Description>
</div>