checkbox-group
Используется для отображения и управления группой однотипных переключателей – чекбоксов.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| type |
'button', 'line' |
BEMJSON |
Тип группы чекбоксов. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
'm', 'l' |
BEMJSON |
Размер группы чекбоксов. Используется только для чекбоксов с модификатором theme в значении islands. |
Специализированные поля блока
| Поле |
Тип |
Описание |
| name |
String |
Уникальное имя блока. |
| val |
Array |
Набор значений выбранных чекбоксов. |
| options |
Array |
Набор значений для каждого чекбокса группы. Каждому типу чекбоксов соответствует разный набор значений. |
Описание блока
Блок checkbox-group позволяет управлять внешним видом и состоянием вложенных чекбоксов.
Модификаторы блока
Модификатор type
Допустимые значения: 'button', 'line'.
Способ использования: BEMJSON.
Кнопочный чекбокс (модификатор type в значении button)
Позволяет реализовать блок checkbox-group с помощью чекбоксов с типом button. Все чекбоксы группы в данном случае всегда располагаются в линию.
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="1"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="2"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Модификатор</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="checkbox-button" value="3"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-button',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Выравнивание (модификатор type в значении line)
Применяется к группе чекбоксов для выравнивания их в линию.
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_line control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_line checkbox_theme_islands checkbox_size_m i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-line" value="1"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><label class="checkbox checkbox_type_line checkbox_theme_islands checkbox_size_m i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-line" value="2"></span><span class="checkbox__text" role="presentation">Элемент</span></label>
<label
class="checkbox checkbox_type_line checkbox_theme_islands checkbox_size_m i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-line" value="3"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
},
name: 'checkbox-line',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Модификатор может быть установлен:
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_disabled control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><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="checkbox" value="1" disabled="disabled"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><br><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="checkbox" value="2" disabled="disabled"></span><span class="checkbox__text" role="presentation">Элемент</span></label><br>
<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="checkbox" value="3" disabled="disabled"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'checkbox',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button checkbox-group_disabled control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button" disabled="disabled"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="1" disabled="disabled"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button" disabled="disabled"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="2" disabled="disabled"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button" disabled="disabled"><span class="button__text">Модификатор</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="3" disabled="disabled"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'checkbox-button',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
- отдельному чекбоксу в группе
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><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="checkbox-line" value="1" disabled="disabled"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><br><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="checkbox-line" value="2"></span><span class="checkbox__text" role="presentation">Элемент</span></label><br>
<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="checkbox-line" value="3"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-line',
options: [
{
val: 1,
text: 'Блок',
disabled: true
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button" disabled="disabled"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-line" value="1" disabled="disabled"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-line" value="2"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Модификатор</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="checkbox-line" value="3"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-line',
options: [
{
val: 1,
text: 'Блок',
disabled: true
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за наличие фокуса на блоке.
Выставляется автоматически при получении блока фокуса.
{
block : 'checkbox-group',
mods : { theme : 'islands', size : 'm', focused : true },
name : 'checkbox',
val : [2],
options : [
{ val : 1, text : 'Блок' },
{ val : 2, text : 'Элемент' },
{ val : 3, text : 'Модификатор' }
]
}
{
block : 'checkbox-group',
mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
name : 'checkbox-button',
val : [2],
options : [
{ val : 1, text : 'Блок' },
{ val : 2, text : 'Элемент' },
{ val : 3, text : 'Модификатор' }
]
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><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="checkbox-islands" value="1"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><br><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="checkbox-islands" value="2"></span><span class="checkbox__text" role="presentation">Элемент</span></label><br>
<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="checkbox-islands" value="3"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-islands',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="1"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="2"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Модификатор</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="checkbox-islands" value="3"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-islands',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор size
Допустимые значения для темы islands: 'm', 'l'.
Способ использования: BEMJSON.
Задает размер всем чекбоксам в группе.
Необходимо использовать с модификатором theme в значении islands.
m
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><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="checkbox-button" value="1" checked="checked"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><br><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="checkbox-button" value="2" checked="checked"></span><span class="checkbox__text" role="presentation">Элемент</span></label><br>
<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="checkbox-button" value="3"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-button',
val: [
1,
2
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="1"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="true" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="2" checked="checked"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="true" type="button"><span class="button__text">Модификатор</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="3" checked="checked"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-button',
val: [
2,
3
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
l
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_l control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_theme_islands checkbox_size_l checkbox_checked i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="1" checked="checked"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><br><label class="checkbox checkbox_theme_islands checkbox_size_l checkbox_checked i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="2" checked="checked"></span><span class="checkbox__text" role="presentation">Элемент</span></label><br>
<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="checkbox-button" value="3"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'l'
},
name: 'checkbox-button',
val: [
1,
2
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'l'
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_l checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_l 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="checkbox" aria-checked="false" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="1"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_l checkbox_checked i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_checked button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="checkbox" aria-checked="true" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="2" checked="checked"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_l checkbox_checked i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_checked button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="checkbox" aria-checked="true" type="button"><span class="button__text">Модификатор</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button" value="3" checked="checked"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'checkbox-button',
val: [
2,
3
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
Специализированные поля блока
Поле name
Тип: String
Определяет уникальное имя группы чекбоксов.
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button-1" value="1"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button-1" value="2"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Модификатор</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="checkbox-button-1" value="3"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-button-1',
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле val
Тип: Array.
Опеределяет набор значений выбранных радиопереключателей.
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="true" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button-1" value="1" checked="checked"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="true" type="button"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-button-1" value="2" checked="checked"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Модификатор</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="checkbox-button-1" value="3"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-button-1',
val: [
1,
2
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент'
},
{
val: 3,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле options
Тип: Array
Определяет набор значений для каждого чекбокса группы.
Каждому типу чекбоксов соответствует разный набор значений.
| Поле |
Тип |
Описание |
val |
String, Number |
Значение, возвращаемое чекбоксом, если он выбран. |
text |
String |
Текст подписи к чекбоксу или текст кнопки чекбокса, если выбран модификатор type в значении button. |
disabled |
Boolean |
Неактивное состояние. |
icon |
BEMJSON |
Иконка. Формируется блоком icon. Используется только для группы чекбоксов с модификатором type в значении button. |
title |
String |
Текст сплывающей подсказки. Используется только для группы чекбоксов с модификатором type в значении button. |
id |
String |
Уникальный идентификатор чекбокса. |
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><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="checkbox-islands" value="1" checked="checked"></span>
<span
class="checkbox__text" role="presentation">Блок</span>
</label><br><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="checkbox-islands" value="2" disabled="disabled"></span><span class="checkbox__text" role="presentation">Элемент</span></label><br>
<label
class="checkbox checkbox_theme_islands checkbox_size_m checkbox_checked checkbox_disabled i-bem" data-bem='{"checkbox":{}}'><span class="checkbox__box"><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="3" checked="checked" disabled="disabled"></span><span class="checkbox__text" role="presentation">Модификатор</span></label><br>
<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="checkbox-islands" value="4"></span><span class="checkbox__text" role="presentation">Модификатор</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-islands',
val: [
1,
3
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент',
disabled: true
},
{
val: 3,
text: 'Модификатор',
disabled: true
},
{
val: 4,
text: 'Модификатор'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" type="button"><span class="button__text">Блок</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="1"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" title="Неактивен" type="button" disabled="disabled"><span class="button__text">Элемент</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="2" disabled="disabled"></label>
<label
class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m checkbox_checked checkbox_disabled i-bem" data-bem='{"checkbox":{}}'><button class="button button_togglable_check button_checked button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="checkbox" aria-checked="true" title="Отмечен и неактивен" type="button" disabled="disabled"><span class="button__text">Модификатор</span></button>
<input
class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="3" checked="checked" disabled="disabled"></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-islands',
val: [
3
],
options: [
{
val: 1,
text: 'Блок'
},
{
val: 2,
text: 'Элемент',
disabled: true,
title: 'Неактивен'
},
{
val: 3,
text: 'Модификатор',
disabled: true,
title: 'Отмечен и неактивен'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Open in a new window<span class="checkbox-group checkbox-group_theme_islands checkbox-group_size_m checkbox-group_type_button control-group i-bem" data-bem='{"checkbox-group":{}}' role="group"><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="true" title="Подписаться на новости БЭМ" type="button"><span class="icon icon_social_twitter"></span>
<span
class="button__text">Twitter</span>
</button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="1" checked="checked"></label><label class="checkbox checkbox_type_button checkbox_theme_islands checkbox_size_m 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="checkbox" aria-checked="false" title="Подписаться на новости БЭМ" type="button" disabled="disabled"><span class="icon icon_social_vk"></span><span class="button__text">ВКонтакте</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="checkbox-islands" value="2" disabled="disabled"></label></span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'checkbox-islands',
val: [
1
],
options: [
{
val: 1,
text: 'Twitter',
title: 'Подписаться на новости БЭМ',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
},
{
val: 2,
text: 'ВКонтакте',
disabled: true,
title: 'Подписаться на новости БЭМ',
icon: {
block: 'icon',
mods: {
social: 'vk'
}
}
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]