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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'button',
val: 'val_1',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Модификатор 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
checked: true
},
name: 'name1',
val: 'val_1',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
checked: true
}
}
]
deps
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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'name2',
val: 'val_2',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
deps
Модификатор 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'name1',
val: 'val_0',
text: 'Конфеты закончились'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'name2',
val: 'val_1',
text: 'Конфеты закончились'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
deps
Модификатор 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'islands',
val: 'val_3',
text: 'Тема islands'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'name1',
val: 'val_1',
text: 'Размер m'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: 'val_1',
text: 'Размер m'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l'
},
name: 'name2',
val: 'val_2',
text: 'Размер l'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'name1',
val: 'val_1',
text: 'Размер l'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
deps
Специализированные поля блока
Поле 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: 'val_1',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name2',
val: 'val_2',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'name1',
val: '1',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: '1',
text: 'Конфеты'
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'name1',
val: 1,
text: 'Поделиться',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
deps
Поле 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'name1',
val: 1,
text: 'Поделиться',
title: 'Кнопка выбора социальной сети',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
deps
Поле 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>
HTML{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'name1',
val: '1',
text: 'Конфеты',
tabIndex: 3
}
BEMJSON[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps