Ввод
Переключатели
Чекбокс, радио и свитч. Все три построены на нативном input: клавиатура,
отправка формы и скринридеры достаются бесплатно.
Разметка
<label class="inst-checkbox"><input type="checkbox" checked>Кешировать результат</label>
<label class="inst-radio"><input type="radio" name="mode" checked>Параллельно</label>
<label class="inst-radio"><input type="radio" name="mode">Последовательно</label>
<label class="inst-switch"><input type="checkbox" checked>Автозапуск</label>
Контракт
Контрол лежит внутри <label>, поэтому for и id не нужны, а вся
подпись становится областью нажатия.
| Что | Обязательно | Почему |
|---|---|---|
<input> внутри <label> |
да | for и id не нужны, а областью нажатия становится вся подпись — единственный способ выполнить WCAG 2.5.8 при глифе в 15px |
Общий name у радиогруппы |
да | Без него варианты не взаимоисключающие, и клавиатурная навигация стрелками не заработает |
<fieldset> с <legend> вокруг радиогруппы |
да | Иначе скринридер прочитает варианты, но не вопрос |
Своего класса у input нет: он опознаётся по типу и родителю.
Клавиатура целиком нативная, instrument.js здесь не перехватывает ничего:
Space переключает, у радиогруппы стрелки перебирают варианты, а Tab входит
в группу и выходит из неё.
Рамка невыбранного берёт --border-control и держит 3:1: у всех трёх граница
и есть контрол, а у свитча к дорожке по той же причине добавляется кольцо.
Цвет при этом не единственный признак — чекбокс несёт галочку, радио точку,
свитч положение бегунка.
Свитч остаётся нативным чекбоксом. role="switch" добавляется, если приложение
хочет, чтобы состояние озвучивалось как «вкл/выкл», а не «отмечено».
Варианты
Выбор между тремя определяется тем, когда применяется значение.
Разметка
<label class="inst-checkbox"><input type="checkbox" checked>Чекбокс</label>
<label class="inst-radio"><input type="radio" name="v" checked>Радио</label>
<label class="inst-switch"><input type="checkbox" checked>Свитч</label>
| Когда | Применяется | |
|---|---|---|
| Чекбокс | Независимый флаг. Их может быть выбрано сколько угодно, включая ноль | По отправке формы |
| Радио | Один из нескольких взаимоисключающих. Выбран всегда ровно один | По отправке формы |
| Свитч | Включение и выключение режима | Немедленно, без кнопки «Применить» |
Состояния
Разметка
<label class="inst-checkbox"><input type="checkbox">Обычный</label>
<label class="inst-checkbox"><input type="checkbox" checked>Выбран</label>
<label class="inst-checkbox"><input type="checkbox" disabled>Недоступен</label>
<label class="inst-checkbox"><input type="checkbox" checked disabled>Выбран и недоступен</label>
Промежуточное состояние чекбокса — свойство indeterminate, оно ставится
только скриптом и не имеет атрибута в разметке:
el.indeterminate = true; // «часть вложенных выбрана»
API
| Имя | Что делает |
|---|---|
| класс | |
inst-checkbox | Обёртка-подпись чекбокса |
inst-radio | То же для радио |
inst-switch | То же для свитча |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--size-check | 15px | база +14: плотность · масштаб |
--size-switch-w | 30px | база +14: плотность · масштаб |
--size-switch-h | 18px | база +14: плотность · масштаб |
--size-thumb | 14px | база +14: плотность · масштаб |
--border-control | light-dark(oklch(0 0 0 / 0.46), oklch(1 0 0 / 0.38)) | одно на все ячейки |
--accent-mark | light-dark(var(--a-4), var(--a-3)) | одно на все ячейки |
--accent-on | var(--n-0) | одно на все ячейки |
--track | light-dark(oklch(0 0 0 / 0.10), oklch(1 0 0 / 0.16)) | одно на все ячейки |
--radius-xs | 4px | база +4: масштаб |
--radius-full | 999px | одно на все ячейки |
--dur-1 | 80ms | одно на все ячейки |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument