Поля ввода
Счётчик отмеченных
Подпись группы чекбоксов со счётчиком выбранного в заголовке группы: «N из M выбрано» пересчитывается на каждый клик и дублируется в живом сообщении.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- заголовок группы через legend, список вариантов через options и стартовый выбор через defaultValue
- тексты счётчика через countText и liveText — {checked} и {total} подставят числа
- цвет фокуса и акцента через accent
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/label-011?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Label011
legend="Каналы уведомлений"
options={["Почта", "SMS", "Push в приложении", "Телеграм-бот", "Звонок"]}
defaultValue={["Почта", "SMS", "Push в приложении"]}
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Заголовок группы
legend· по умолчанию: Каналы уведомлений- Счётчик
countText· по умолчанию: {checked} из {total} выбрано- Акцент
accent· по умолчанию: цвет темы- Подложка
background· по умолчанию: цвет темы
Ещё в разделе «Поля ввода»
Частые вопросы
- Как установить компонент «Счётчик отмеченных» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Счётчик отмеченных»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Счётчик отмеченных»?
- Можно менять: заголовок группы через legend, список вариантов через options и стартовый выбор через defaultValue; тексты счётчика через countText и liveText — {checked} и {total} подставят числа; цвет фокуса и акцента через accent. Сохранить как есть: локальную палитру --vibeui-label-011-* и не подменять её токенами вашей темы; счётчик внутри <legend>, а не над или под группой: он относится ко всей группе, а не к одному чекбоксу; приём float:left;width:100% на самом <legend> и flex только на вложенном <span> — flex прямо на <legend> ведёт себя непредсказуемо в части браузеров.
- Компонент «Счётчик отмеченных» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/label-011.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Клиентский компонент: список выбранных значений держит useState, из него считается счётчик. Один файл, без зависимостей, палитра в локальных переменных --vibeui-label-011-*. У группы чекбоксов нет единственного поля, которое подписывает <label>, поэтому счётчик встроен в <legend> — общую подпись группы, а не в подпись одного из полей. <legend> получает раскладку через приём проекта (float:left;width:100%), а строка «текст + счётчик» внутри неё — обычный flex на вложенном <span>, без ограничений браузеров на flex-легенду. Отдельный визуально скрытый параграф с aria-live дублирует итог для скринридера, чтобы не пришлось переслушивать весь список чекбоксов после каждого клика. Палитра построена на light-dark(): блок следует color-scheme окружения, подложки по умолчанию нет, и она появляется только пропом background.
Теги
- label
- form
- checkbox
- counter
- a11y
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…