Чекбокс — элемент интерфейса¶
Чекбокс (от англ. checkbox, «чек-бокс»; также квадрат выбора, флажок) — элемент графического интерфейса, предназначенный для выбора одного или нескольких значений из предложенного набора. Визуально представляет собой небольшой квадрат, который при выборе заполняется отметкой (галочкой, крестиком или другим маркером). Чекбокс реализует логику «включено/выключено» и допускает независимый выбор нескольких элементов, в отличие от радиокнопки, где возможен только один выбор из группы.
¶Происхождение термина
Термин «checkbox» появился в 1980-х годах в среде текстовых и графических интерфейсов IBM и Microsoft. В русскоязычной документации закрепился перевод «квадрат выбора» (в стандартах ГОСТ и рекомендациях по локализации Microsoft), однако в повседневной разработке чаще используется заимствование «чекбокс». Слово «флажок» применяется в контексте веб-разработки как калька с английского «flag».
¶Принцип работы
Чекбокс хранит булево значение — true (выбран) или false (не выбран). Пользователь переключает состояние нажатием мышью, касанием или клавишей пробела при фокусе. В отличие от радиокнопок (radio buttons), несколько чекбоксов в группе не ограничивают друг друга: можно выбрать ни одного, один, несколько или все сразу.
В HTML чекбокс создаётся элементом <input type="checkbox">. Атрибут checked задаёт начальное состояние, name и value — данные, отправляемые на сервер. Для связывания подписи с чекбоксом используется элемент <label>.
``html <input type="checkbox" id="agree" name="agree" value="1"> <label for="agree">Согласен с условиями</label> ``
¶Разновидности
| Тип | Описание |
|---|---|
| Простой чекбокс | Квадрат с галочкой при выборе; классическое поведение |
| Три-стейт (indeterminate) | Третье состояние «не определено», отображается прочерком; часто используется для «выбрать все» в древовидных списках |
| Флажок-переключатель (toggle) | Веб-вариант в виде тумблера; визуально имитирует аппаратный выключатель |
| Чекбокс в списке | Элемент многострочного списка с прокруткой |
| Галочка без рамки | Используется в меню и панелях инструментов для отображения включённых опций |
¶Доступность
Согласно рекомендациям WAI-ARIA, чекбокс должен иметь доступное имя (через <label> или aria-label), сообщать состояние с помощью aria-checked и поддерживать управление с клавиатуры. Для индикации смешанного состояния применяется aria-checked="mixed". Размер зоны нажатия рекомендуется не менее 24×24 пикселей.
¶Применение
Чекбоксы используются в формах регистрации, настройках программ, фильтрах каталогов, анкетах и конструкторах. В операционных системах они встречаются в диалогах свойств, диспетчерах задач и установщиках. В веб-разработке на основе чекбоксов строятся переключатели согласия, выбор параметров доставки, включение уведомлений.
¶Отличие от радиокнопки
| Свойство | Чекбокс | Радиокнопка |
|---|---|---|
| Форма | Квадрат | Круг |
| Количество выбора | Несколько или ни одного | Ровно один в группе |
| Сценарий | Независимые опции | Взаимоисключающие варианты |
| HTML-элемент | <input type="checkbox"> | <input type="radio"> |
¶См. также
- Радиокнопка
- Переключатель (интерфейс)
- Поле ввода
- Доступность программного обеспечения
¶Источники
- ГОСТ Р ИСО 9241-110 — «Эргономические требования к интерактивным системам»
- Документация W3C по WAI-ARIA
- MDN Web Docs — HTMLInputElement
- Руководство по интерфейсам Microsoft (Fluent Design)