checkbox-group
Use this block for managing a group of checkboxes.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| type |
'button', 'line' |
BEMJSON |
The type of checkbox group. |
| disabled |
true |
BEMJSON, JS |
The disabled state. |
| focused |
true |
BEMJSON, JS |
The block is in focus. |
| theme |
'islands' |
BEMJSON |
A custom design. |
| size |
'm', 'l' |
BEMJSON |
The size of checkbox group. Use sizes only for checkboxes with the theme modifier set to islands. |
Custom fields of the block
| Field |
Type |
description |
| name |
String |
The block unique name. |
| val |
Array |
A set of values for the selected checkboxes. |
| options |
Array |
A set of values for each checkbox of the group. Each checkbox has its own set of values. |
Block description
Use the checkbox-group block to control the size, state, and appearance of the checkboxes in the group.
Modifiers of the block
type modifier
Acceptable values: 'button', 'line'.
Use case: BEMJSON.
A button-based checkbox group (type modifier with button value)
Implements the checkbox-group block using the button-based type of checkboxes.
Grouped button-based checkboxes are always aligned in a line.
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
A line-aligned checkbox group (type modifier with line value)
The modifier aligns all checkboxes of the group in a 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">Block</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">Element</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
},
name: 'checkbox-line',
options: [
{
val: 1,
text: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
}
}
]
disabled modifier
Acceptable value: true.
Use cases: BEMJSON, JS.
The modifier makes the block inactive. The disabled block is visible but not available for user actions.
The modifier can be applied to:
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">Block</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">Element</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'checkbox',
options: [
{
val: 1,
text: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
- The separate checkbox of the group:
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">Block</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">Element</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-line',
options: [
{
val: 1,
text: 'Block',
disabled: true
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
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">Block</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">Element</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">Modifier</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: 'Block',
disabled: true
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
focused modifier
Acceptable value: true.
Use cases: BEMJSON, JS.
The modifier puts the focus on the block.
{
block : 'checkbox-group',
mods : { theme : 'islands', size : 'm', focused : true },
name : 'checkbox',
val : [2],
options : [
{ val : 1, text : 'Block' },
{ val : 2, text : 'Element' },
{ val : 3, text : 'Modifier' }
]
}
{
block : 'checkbox-group',
mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
name : 'checkbox-button',
val : [2],
options : [
{ val : 1, text : 'Block' },
{ val : 2, text : 'Element' },
{ val : 3, text : 'Modifier' }
]
}
theme modifier
Acceptable value: 'islands'.
Use case: BEMJSON.
The modifier gives the block a custom design.
The islands theme requires the size modifier.
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">Block</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">Element</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-islands',
options: [
{
val: 1,
text: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
size modifier
Acceptable values for the islands theme: 'm', 'l'.
Use case: BEMJSON.
Use the size modifier only for blocks with the islands theme.
Sets the size value for all types of checkbox groups.
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">Block</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">Element</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-button',
val: [
1,
2
],
options: [
{
val: 1,
text: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
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">Block</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">Element</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'l'
},
name: 'checkbox-button',
val: [
1,
2
],
options: [
{
val: 1,
text: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
Custom fields of the block
name field
Type: String
Specifies the block unique name.
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
val field
Type: Array.
Specifies a set of values for the selected checkboxes.
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">Block</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">Element</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">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element'
},
{
val: 3,
text: 'Modifier'
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
options field
Type: Array
Specifies a set of values for each checkbox of the group.
Each checkbox has its own set of values.
| Field |
Type |
description |
val |
String, Number |
The value to send to the server if the checkbox is selected. |
text |
String |
The checkbox label, or the button label if the type modifier is set to button. |
disabled |
Boolean |
The disabled state. |
icon |
BEMJSON |
The checkbox icon, which is created by the icon block. Use icons only for checkboxes with the type modifier set to button. |
title |
String |
Tooltip content. Use tooltips only for checkboxes with type modifier set to button. |
id |
String |
The checkbox unique ID. |
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">Block</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">Element</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">Modifier</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">Modifier</span></label>
</span>
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'checkbox-islands',
val: [
1,
3
],
options: [
{
val: 1,
text: 'Block'
},
{
val: 2,
text: 'Element',
disabled: true
},
{
val: 3,
text: 'Modifier',
disabled: true
},
{
val: 4,
text: 'Modifier'
}
]
}
[
{
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">Block</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="Disabled" type="button" disabled="disabled"><span class="button__text">Element</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="Checked and disabled" type="button" disabled="disabled"><span class="button__text">Modifier</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: 'Block'
},
{
val: 2,
text: 'Element',
disabled: true,
title: 'Disabled'
},
{
val: 3,
text: 'Modifier',
disabled: true,
title: 'Checked and disabled'
}
]
}
[
{
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="Follow BEM on Twitter" 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="Follow BEM on VKontakte" type="button" disabled="disabled"><span class="icon icon_social_vk"></span><span class="button__text">VKontakte</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: 'Follow BEM on Twitter',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
},
{
val: 2,
text: 'VKontakte',
disabled: true,
title: 'Follow BEM on VKontakte',
icon: {
block: 'icon',
mods: {
social: 'vk'
}
}
}
]
}
[
{
block: 'checkbox-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]