Группа переключателей

Группа переключателей — это ряд вариантов, который читается как один элемент управления. Соберите его из items и укажите активный через value.

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

toggleGroup({
  label: 'Выравнивание текста',
  value: 'center',
  items: [
    { value: 'left', label: 'Слева' },
    { value: 'center', label: 'По центру' },
    { value: 'right', label: 'Справа' },
  ],
})

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

toggleGroup({ label: 'Плотность', value: 'обычная', items: ['плотная', 'обычная', 'просторная'] })

Ссылки

Именно эту форму обычно и хочет статический сайт: каждый сегмент — страница. Элементы с href рисуются ссылками, а активный помечается aria-current="page", а не aria-pressed, потому что ссылка — это не кнопка, которую вы вдавили.

Документация UI Примеры

toggleGroup({
  label: 'Раздел',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Документация', href: '/ru/docs' },
    { value: 'ui', label: 'UI', href: '/ru/ui' },
    { value: 'examples', label: 'Примеры', href: '/ru/examples' },
  ],
})

Больше одного активного

Передайте массив в value. Контейнер в обоих случаях остаётся обычной group: radiogroup здесь был бы неверен, ведь это нажатые кнопки, а не радиокнопки.

toggleGroup({
  label: 'Форматирование',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Полужирный' },
    { value: 'italic', label: 'Курсив' },
    { value: 'underline', label: 'Подчёркнутый' },
  ],
})

Размеры и варианты

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Маленькая', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Средняя', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Большая', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Отключённые элементы

toggleGroup({
  label: 'Рендеринг',
  value: 'static',
  items: [
    { value: 'static', label: 'Статика' },
    { value: 'islands', label: 'Острова' },
    { value: 'ssr', label: 'SSR', disabled: true },
  ],
})

В панели инструментов

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Выравнивание', value: 'Слева', size: 'sm', items: ['Слева', 'По центру', 'Справа'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Начертание', value: ['Полужирный'], size: 'sm', items: ['Полужирный', 'Курсив'] }),
)

Когда лучше взять другое

Если выбор отправляется вместе с формой, берите choiceGroup(): настоящие радиокнопки, скрипт не нужен. Если каждый сегмент — страница, предпочтите форму со ссылками выше. Группа переключателей нужна для выбора, на который реагирует сама страница.

Пропсы

Проп	Тип	По умолчанию	Описание
`items`	`Array`	`[]`	Строки или объекты { value, label, href, disabled }.
`value`	`string \| number \| Array`	—	Какой элемент включён. Массив, когда их может быть несколько.
`label`	`string`	—	Доступное имя группы.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Применяется к каждому элементу.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Как выглядит выключенный элемент.