checkbox
Используется для управления параметром выбора с двумя состояниями – «включено» и «выключено».
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| type |
'button' |
BEMJSON |
Тип чекбокса. |
| checked |
true |
BEMJSON, JS |
Выбор чекбокса. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| hovered |
true |
– |
Наведение курсором. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
'm', 'l' |
BEMJSON |
Размер чекбокса. Используется для чекбоксов с модификатором theme в значении islands. |
Специализированные поля блока
Описание блока
Примечание HTML-атрибут autocomplete принудительно переведен в состояние off для обеспечения корректной работы блока.
Модификаторы блока
Модификатор type
Допустимое значение: 'button'.
Способ использования: BEMJSON.
Используется для изменения внешнего вида блока на кнопочный. В таком случае выбор чекбокса происходит нажатием на кнопку.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Конфеты</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="button" value="val_1"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'button',
val: 'val_1',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор checked
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Используется для выбора чекбокса.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_checked i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="val_1" checked="checked"></span><span class="checkbox__text" role="presentation">Конфеты</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
checked: true
},
name: 'name1',
val: 'val_1',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
checked: true
}
}
]
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button checkbox_checked i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="button__text">Конфеты</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name2" value="val_2" checked="checked"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'name2',
val: 'val_2',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_disabled i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="val_0" disabled="disabled"></span><span class="checkbox__text" role="presentation">Конфеты закончились</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'name1',
val: 'val_0',
text: 'Конфеты закончились'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button checkbox_disabled i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled" aria-pressed="false"><span class="button__text">Конфеты закончились</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name2" value="val_1" disabled="disabled"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'name2',
val: 'val_1',
text: 'Конфеты закончились'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за наличие фокуса на блоке.
Выставляется автоматически при получении блока фокуса.
{
block : 'button',
mods : { theme : 'islands', size : 'm', focused : true },
text : 'В фокусе'
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор hovered
Допустимое значение: true.
Способы использования: – .
Выставляется блоку автоматически, когда курсор мыши находится в пределах контрола.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="islands" value="val_3"></span><span class="checkbox__text" role="presentation">Тема islands</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'islands',
val: 'val_3',
text: 'Тема islands'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Модификатор size
Допустимые значения для темы islands: 'm', 'l'.
Способ использования: BEMJSON.
Задает размер блока.
Необходимо использовать с модификатором theme в значении islands.
m
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="val_1"></span><span class="checkbox__text" role="presentation">Размер m</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'name1',
val: 'val_1',
text: 'Размер m'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Размер m</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="val_1"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: 'val_1',
text: 'Размер m'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
l
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_l i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="name2" value="val_2"></span><span class="checkbox__text" role="presentation">Размер l</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l'
},
name: 'name2',
val: 'val_2',
text: 'Размер l'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l'
}
}
]
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_l checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Размер l</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="val_1"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'name1',
val: 'val_1',
text: 'Размер l'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет уникальное имя чекбокса.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Конфеты</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="val_1"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: 'val_1',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле val
Тип: String, Number.
Значение чекбокса, которое будет отправлено на сервер.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Конфеты</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name2" value="val_2"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name2',
val: 'val_2',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле text
Тип: String.
Определяет текст подписи к чекбоксу или текст кнопки, если указан модификатор type в значении button.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="1"></span><span class="checkbox__text" role="presentation">Конфеты</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'name1',
val: '1',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Конфеты</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="1"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: '1',
text: 'Конфеты'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле icon
Тип: BEMJSON.
Определяет иконку, которая отображается с помощью блока icon.
Используется только для чекбокса с модификатором type в значении button.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button checkbox_checked i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="icon icon_social_twitter"></span><span class="button__text">Поделиться</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="1" checked="checked"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'name1',
val: 1,
text: 'Поделиться',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
Поле title
Тип: String.
Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
Используется только для чекбокса с модификатором type в значении button.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button checkbox_checked i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" title="Кнопка выбора социальной сети" type="button" aria-pressed="true"><span class="icon icon_social_twitter"></span><span class="button__text">Поделиться</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="1" checked="checked"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'name1',
val: 1,
text: 'Поделиться',
title: 'Кнопка выбора социальной сети',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
Поле tabIndex
Тип: Number.
Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.
Open in a new window<label class="checkbox checkbox_theme_islands checkbox_size_m checkbox_type_button i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Конфеты</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="name1" value="1"></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: '1',
text: 'Конфеты',
tabIndex: 3
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]