VibeUI
РусEng
Войти

Флажки и переключатели

Заблокированная радиогруппа

Радиогруппа, выключенная целиком: fieldset с disabled гасит все варианты одним атрибутом, а причина блокировки и живая ссылка на снятие ограничения остаются рядом.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • вопрос через legend и варианты через options
  • текущий фиксированный выбор через value
  • имя радиокнопок через name

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Заблокированная радиогруппа — Радиогруппа, выключенная целиком: fieldset с disabled гасит все варианты одним атрибутом, а причина блокировки и живая ссылка на снятие ограничения остаются рядом.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/radio-019?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Radio019
  legend="Роль в проекте"
  value="editor"
  reason="Роль назначает владелец рабочего пространства."
  actionText="Написать владельцу"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
legend · по умолчанию: Роль в проекте
Текущая роль
value · по умолчанию: editor
Причина блокировки
reason · по умолчанию: Роль назначает владелец рабочего пространства — самостоятельно её не сменить.
Ссылка выхода
actionText · по умолчанию: Написать владельцу
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Ещё в разделе «Флажки и переключатели»

Частые вопросы

Как установить компонент «Заблокированная радиогруппа» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Заблокированная радиогруппа»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Заблокированная радиогруппа»?
Можно менять: вопрос через legend и варианты через options; текущий фиксированный выбор через value; имя радиокнопок через name. Сохранить как есть: локальную палитру --vibeui-radio-019-* — не заменять её токенами темы проекта; disabled на самом fieldset — так выключаются все варианты одним атрибутом, а не построчно; явный disabled на каждом input рядом с disabled fieldset — иначе React предупреждает про checked без onChange.
Компонент «Заблокированная радиогруппа» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/radio-019.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Серверный компонент: состояния и хуков нет, выбранный вариант зашит пропом value через defaultChecked. disabled на fieldset выключает все вложенные радиокнопки сразу; явный disabled стоит и на каждом input, иначе React предупреждает про checked без onChange. Ссылка на снятие ограничения не подчиняется disabled fieldset и остаётся кликабельной. Палитра в --vibeui-radio-019-* переведена на light-dark().

Теги

  • radio
  • disabled
  • locked
  • form
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…