Radio

Radio показывает все варианты до выбора и хранит одно существующее значение. Вопрос и валидация относятся ко всей группе.

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

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

Небольшой набор взаимоисключающих вариантов важно видеть и сравнивать до выбора.
Изображение является существенной частью сравнения — используется variant=images с подписью каждой плитки.

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

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

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

checkbox-group — можно выбрать несколько значений
select — одно значение выбирается из более длинного списка компактно
segmented-control — режим текущего представления переключается мгновенно

Конструктор

Меняйте свойства Radio, сочетайте их и проверяйте результат в одном живом экземпляре.

Настроение интерфейса

Спокойный

Тёплый

Холодный

Вертикально

Видимый вопрос, text-items и циклический выбор стрелками; рядом — hint группы.

Период тарификации

Неделя

Месяц

Год

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

let value = $state("");

const items = [
  { value: "week", label: t("Неделя") },
  { value: "month", label: t("Месяц") },
  { value: "year", label: t("Год") },
];
</script>

<RadioGroup
  label={t("Период тарификации")}
  name="plan"
  {items}
  bind:value
  hint={t("Период применяется при следующем продлении")}
/>

Пояснения и ошибка

Описание принадлежит item, required и error — группе целиком.

Способ получения

Курьер

До двери в выбранный интервал.

Самовывоз

Из ближайшего пункта выдачи.

Проверка

Обычная

Строгая

Строгая проверка не поддерживает текущий формат.

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

let delivery = $state("courier");
let validation = $state("strict");

const deliveryItems = [
  { value: "courier", label: t("Курьер"), description: t("До двери в выбранный интервал.") },
  { value: "pickup", label: t("Самовывоз"), description: t("Из ближайшего пункта выдачи.") },
];

const validationItems = [
  { value: "normal", label: t("Обычная") },
  { value: "strict", label: t("Строгая") },
];
</script>

<div style="display: grid; gap: var(--sp-3);">
  <RadioGroup
    label={t("Способ получения")}
    name="delivery"
    items={deliveryItems}
    bind:value={delivery}
    required
  />
  <RadioGroup
    label={t("Проверка")}
    name="validation"
    items={validationItems}
    bind:value={validation}
    error={t("Строгая проверка не поддерживает текущий формат.")}
  />
</div>

Горизонтально

Короткие подписи text-варианта переносятся по строкам.

Выравнивание

Слева

По центру

Справа

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

let value = $state("left");

const items = [
  { value: "left", label: t("Слева") },
  { value: "center", label: t("По центру") },
  { value: "right", label: t("Справа") },
];
</script>

<RadioGroup label={t("Выравнивание")} name="align" {items} bind:value orientation="horizontal" />

Плитки

Плитки по легаси radioImage: круг radio в углу, картинка на поле не ниже 64, подпись капителью; видимая подпись остаётся доступным именем.