Группа кнопок
Запоминаемый выбор
Группа кнопок, чей выбор честно отправляется формой: рядом лежит скрытый input, а значение продублировано на корне атрибутом data-value.
Что можно поменять
- набор вариантов через options
- исходное значение через defaultValue
- имя поля формы через name и доступное имя группы через label
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/buttongroup-057?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-057-*. Клиентский: useState хранит выбранное значение. Кнопки с aria-pressed сами по себе ничего не отправляют, поэтому внутри группы лежит input[type=hidden] с тем же значением — форма собирает его через FormData так же, как обычное поле, и серверу не нужно ничего знать про кнопки. Значение продублировано на корне атрибутом data-value: его видно в инспекторе, по нему можно писать тесты и стили, не заглядывая в состояние React. Строка под группой показывает пару, которая уедет на сервер, — это способ поймать расхождение между видом и данными. Трек — role="toolbar" с roving tabindex: Tab останавливается на группе один раз, значение переключают стрелками.
Теги
- buttongroup
- form
- hidden-input
- state
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…