Label

Label подписывает то, у чего нет собственной подписи: группу контролов, значение в сводке, переключатель в строке. Она повторяет подпись поля её же токенами — цвет, звёздочка обязательности, размеры и поднятая форма active (кегль --input-label-fs-active, как у заполненного поля), поэтому подпись вне поля и подпись внутри него выглядят одинаково.

Статус: experimental · в системе с 2026-08 · интерактивность: conditional (по конфигурации)

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

Подпись группы контролов, у которой нет своей: набор тегов-переключателей, пара полей одного смысла.
Подпись значения в сводке сущности: «Balance:» над суммой, «Payment type» перед меткой — поднятая форма active или s.
Подпись контрола, который сам её не рисует: for связывает подпись с ним.
Плотная подпись ячейки или строки списка — xs.

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

Подпись поля Input, Select, Textarea — у полей она встроена и плавает сама.
Заголовок блока или секции — это Title.
Пояснение или ошибка под контролом — это Description.

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

title — заголовок блока или секции, а не подпись контрола
description — пояснение под контролом, а не его имя
input — подпись поля — проп label самого поля

Размеры

Три плотности подписи со звёздочкой обязательности.

Campaign name Status Row ID

<!--
  🟢

  Три плотности подписи со звёздочкой обязательности: m рядом с полями m,
  s у компактных полей, xs — плотная подпись ячейки.
-->

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

<div style="display: flex; flex-direction: column; gap: var(--sp-2);">
	<Label size="m" required>Campaign name</Label>
	<Label size="s" required>Status</Label>
	<Label size="xs">Row ID</Label>
</div>

Поднятая форма

Подпись значения в сводке: active над суммой и s перед меткой.

Balance $1,240.00

Payment type Wire transfer

<!--
  🟢

  Поднятая форма подписи над значением в сводке: `active` даёт 10px, как у
  подписи заполненного поля, `s` — компактную подпись перед меткой.
-->

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

<div style="display: flex; gap: var(--sp-5);">
	<div style="display: flex; flex-direction: column; gap: var(--sp-0-5);">
		<Label active>Balance</Label>
		<span style="color: var(--c-text); font-size: var(--fs-m);">$1,240.00</span>
	</div>
	<div style="display: flex; flex-direction: column; gap: var(--sp-0-5);">
		<Label size="s" active>Payment type</Label>
		<span style="color: var(--c-text); font-size: var(--fs-s);">Wire transfer</span>
	</div>
</div>

С подсказкой

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

Targeting

Десктоп Mobile Планшет

<!--
  🟢

  Подпись группы с подсказкой: значок «?» справа раскрывает Tooltip. У группы
  тегов-переключателей нет своей подписи — её даёт Label.
-->

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

<div style="display: flex; flex-direction: column; gap: var(--sp-1); max-width: 320px;">
	<Label hint="Applies to all placements in the group." required>Targeting</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>{t("Tablet")}</span>
	</div>
</div>