Радиогруппа

Радиокнопки нужны, чтобы выбрать ровно один вариант из небольшого видимого набора. radio() рисует одну; choiceGroup() строит весь набор из массива и даёт ему легенду и role="radiogroup", которые превращают его в группу, а не в кучу инпутов.

У них общий name, поэтому взаимную исключительность и переходы стрелками берёт на себя браузер. Никакого скрипта здесь не отгружается.

Простая радиогруппа

Тариф
choiceGroup({
  legend: 'Тариф',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Бесплатный' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Командный' },
  ],
})

В строку

Короткие подписи лучше читаются в одну строку. Длинные пусть остаются столбиком — так и задано по умолчанию.

Форм-фактор
choiceGroup({
  legend: 'Форм-фактор',
  name: 'form-factor',
  direction: 'row',
  value: 'desktop',
  options: ['desktop', 'mobile'],
})

Обычные строки

Когда значение и подпись совпадают, передавайте строки.

Уровень логов
choiceGroup({
  legend: 'Уровень логов',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Отключённые варианты

Рендеринг
Полному SSR нужен Node-хостинг, которого у этого проекта нет.
choiceGroup({
  legend: 'Рендеринг',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Статика' },
    { value: 'islands', label: 'Серверные острова' },
    { value: 'ssr', label: 'Полный SSR', disabled: true },
  ],
  help: 'Полному SSR нужен Node-хостинг, которого у этого проекта нет.',
})

По одной

Берите radio() напрямую, когда варианты слишком разнородны, чтобы приходить из массива, — например, когда у каждого своё описание.

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'При каждом пуше', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Только для помеченных релизов' }),
  radio({ name: 'deploy', value: 'manual', label: 'Вручную' }),
)

Цвета

stack({ direction: 'row', gap: 'lg', wrap: true },
  radio({ label: 'Primary', name: 'c1', checked: true, color: 'primary' }),
  radio({ label: 'Neutral', name: 'c2', checked: true, color: 'neutral' }),
  radio({ label: 'Success', name: 'c3', checked: true, color: 'success' }),
  radio({ label: 'Warning', name: 'c4', checked: true, color: 'warning' }),
  radio({ label: 'Danger', name: 'c5', checked: true, color: 'danger' }),
)

В карточке

Настройки сборки

Применятся при следующем развёртывании

Чистые URL
Изображения
card(
  cardHeader({ title: 'Настройки сборки', subtitle: 'Применятся при следующем развёртывании' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'Чистые URL',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Включены' },
          { value: 'off', label: 'Выключены' },
        ],
      }),
      choiceGroup({
        legend: 'Изображения',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Менять размер и формат' },
          { value: 'copy', label: 'Копировать как есть' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Сохранить'),
  ),
)

Пропсы

choiceGroup():

ПропТипПо умолчаниюОписание
legendChild—Подпись всей группы.
namestring—Общее имя поля — именно оно делает радиокнопки взаимоисключающими.
optionsArray[]Строки или объекты { value, label, disabled }.
valuestring | number | Array—Какой вариант отмечен. Массив — для флажков.
type'radio' | 'checkbox''radio'Какой элемент строить. Заодно задаёт роль группы.
direction'row' | 'column''column'Как расположены варианты.
helpChild—Подсказка под группой.

radio() принимает те же пропсы, что и checkbox(): label, color, checked, name, value и disabled.