Флажки и переключатели
Выбор цвета с пружинным выделением
Ряд цветовых свотчей на радиокнопках: выбранный пружинно раздувается с кольцом в своём цвете, а соседи расступаются.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- названия цветов через optionText — они и есть подписи для скринридера
- defaultValue — какой свотч выбран изначально
- size — диаметр свотча в пикселях
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/radio-020?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Radio020 label="Цвет акцента" defaultValue="amber" />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Выбран цвет
defaultValue· по умолчанию: amber- Диаметр
size· по умолчанию: 34- Имя набора
label· по умолчанию: Цвет акцента- Акцент
accent· по умолчанию: цвет темы- Фон
background· по умолчанию: цвет темы
Ещё в разделе «Флажки и переключатели»
Частые вопросы
- Как установить компонент «Выбор цвета с пружинным выделением» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Выбор цвета с пружинным выделением»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Выбор цвета с пружинным выделением»?
- Можно менять: названия цветов через optionText — они и есть подписи для скринридера; defaultValue — какой свотч выбран изначально; size — диаметр свотча в пикселях. Сохранить как есть: локальную палитру --vibeui-radio-020-* и не подменять её токенами вашей темы; настоящие радиокнопки внутри подписей: они держат выбор, попадают в форму и переключаются стрелками; скрытое название цвета в каждой подписи: кружок без текста для скринридера безымянный, а цвет — не имя.
- Компонент «Выбор цвета с пружинным выделением» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/radio-020.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Один файл, ноль зависимостей, палитра --vibeui-radio-020-*. Серверный компонент: выбор держат радиокнопки внутри подписей, состояния в React нет. Группа — fieldset с legend, каждый свотч — label с невидимым input type="radio", кружком и скрытым названием цвета для скринридера. Цвет кружка приходит из переменной --vibeui-radio-020-dot в атрибуте style подписи, диаметр — из --vibeui-radio-020-size, которую ставит проп size. Вид выбранного собирают селекторы :has(input:checked): кольцо box-shadow на подписи (её отступ и есть зазор), transform:scale(1.18) у кружка и галочка от scale(0.4). Соседи отходят на 0.1875rem, причём предыдущий достаётся селектором :has(+ …). Галочка красится в чёрный или белый через oklch(from …): светлота свотча заранее неизвестна. Тема берётся из color-scheme через light-dark(), класс .dark и data-theme="dark" объявляют color-scheme:dark.
Теги
- radio
- swatch
- color
- has-selector
- spring
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…