Создание компонентов чекбоксов и радиокнопок

Мы продолжаем развивать библиотеку атомарных компонентов. После проектирования полей ввода пришло время переключиться на элементы выбора.

В проектах на Next.js пользователю часто нужно выбрать один или несколько параметров. Для этого мы используем два инструмента: чекбокс и радиокнопка. Чтобы разработчик бесшовно перенес их в код, мы настроим их в Figma с четкой логикой состояний.

Анатомия элементов выбора

Разделяйте компоненты по их функции. Это база UX и корректной верстки:

1. Чекбокс (Checkbox) — для множественного выбора. Позволяет отметить несколько пунктов или переключить один параметр в режим «вкл/выкл».
2. Радиокнопка (Radio Button) — для выбора одного варианта из группы. Клик по новому пункту отменяет предыдущий.

Оба компонента состоят из индикатора (маркера) и лейбла (текста). Всегда объединяйте их через Автолейаут. Так область нажатия охватит и текст, что удобнее для пользователя.

Как показано на Схеме 1, структура компонентов идентична. Это позволяет унифицировать отступы и стили в дизайн-системе.

Визуальное состояние и переменные

Для доступности (Accessibility) интерфейс должен реагировать на действия пользователя. В Figma мы реализуем это через визуальное состояние (State) в свойствах варианта.

Настройте четыре обязательных статуса:

• Default: готов к работе.
• Hover: курсор наведен. Используйте токен чуть темнее или светлее основного фона.
• Focus: элемент выбран с клавиатуры. Добавьте контрастную обводку (outline). Это критично для Next.js приложений, которыми пользуются без мышки.
• Disabled: элемент заблокирован. Снизьте непрозрачность до 30–50%.

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

Сборка через варианты

Используйте Boolean Properties, чтобы управлять видимостью «галочки» или «точки» внутри индикатора.

Чекбокс

Создайте квадрат со скруглением (например, radius-s).

Совет: Не рисуйте галочку пером. В следующем уроке мы научимся правильно импортировать SVG, а пока используйте любой временный векторный объект.

Радиокнопка

Создайте круг (например, 20x20 px). В состоянии Selected внутри появляется точка. Установите фиксированные размеры (Fixed) для индикатора, чтобы он не деформировался при длинном тексте.

Рекомендуемые свойства для настройки:

Свойство (Property)	Значения	Описание
Selected	Yes / No	Выбран элемент или нет
State	Default, Hover, Focus, Disabled	Интерактивное состояние
Label	Текст	Свойство контента для быстрой правки

Практические советы

• Выравнивание: В Автолейауте ставьте Left-Center. Если текст лейбла станет многострочным, индикатор останется ровно по центру первой строки 📐
• Именование слоев: Называйте текстовый слой Label, а маркер — Indicator. Разработчик в Dev Mode сразу поймет структуру.
• Область клика: Для мобильных интерфейсов делайте высоту контейнера не менее 44 px. Даже если визуально кнопка меньше, попасть по ней пальцем должно быть легко 👆
• Чистота структуры: Если нужен чекбокс без текста (например, для таблиц), создайте отдельный вариант. Не удаляйте слои внутри экземпляров вручную.

Мы закончили с базовыми формами. Теперь у нас есть кнопки, поля ввода и переключатели. Чтобы интерфейс выглядел профессионально, нам нужна графика. В следующей теме разберем Подготовку и импорт SVG-иконок в Figma.