checkbox
Use this block to control a selection parameter with two available states – ”ON“ and ”OFF“.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| type |
'button' |
BEMJSON |
The type of checkbox. |
| checked |
true |
BEMJSON, JS |
Selection of the checkbox. |
| disabled |
true |
BEMJSON, JS |
The disabled state. |
| focused |
true |
BEMJSON, JS |
The block is in focus. |
| hovered |
true |
– |
The hovered state. |
| theme |
'islands' |
BEMJSON |
A custom design. |
| size |
'm', 'l' |
BEMJSON |
The size of the chackbox. Use sizes only for checkboxes with the theme modifier set to islands. |
Custom fields of the block
| Field |
Type |
Description |
| name |
String |
The unique block name. |
| val |
String, Number |
The value to send to the server if the checkbox is selected. |
| text |
String |
Checkbox lable. |
| icon |
BEMJSON |
Checkbox icon. It is created by the icon block. Use icons only when checkboxes with the type modifier is set to button. |
| title |
String |
Tooltip content. Use tooltips only for checkboxes when the type modifier is set to button. |
| tabIndex |
Number |
The order when navigating through controls on a page by pressing the Tab key. |
Block description
NB The autocomplete HTML attribute is forced to OFF state by default to provide correct behavior of the block.
Modifiers of the block
type modifier
Acceptable value: 'button'.
Use case: BEMJSON.
Use the type modifier with the button value to change the appearance of the block: the checkbox is implemented by the button. Press the button to select the checkbox.
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="checkbox" aria-checked="false" type="button"><span class="button__text">Candies</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: 'Candies'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
checked modifier
Acceptable value: true.
Use case: BEMJSON, JS.
Use the checked modifier with the true value to select the checkbox.
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">Candies</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
checked: true
},
name: 'name1',
val: 'val_1',
text: 'Candies'
}
[
{
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="checkbox" aria-checked="true" type="button"><span class="button__text">Candies</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: 'Candies'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
disabled modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier makes the block inactive. The disabled block is visible but not available for user actions.
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">Candies</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'name1',
val: 'val_0',
text: 'Candies'
}
[
{
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="checkbox" aria-checked="false" type="button" disabled="disabled"><span class="button__text">Candies</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: 'Candies'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
focused modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier puts the focus on the block.
{
block : 'button',
mods : { theme : 'islands', size : 'm', focused : true },
text : 'In focus'
}
hovered modifier
Acceptable value: true.
Use case: – .
The modifier is added to the block automatically at the moment when you mouse it over.
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<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 theme</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'islands',
val: 'val_3',
text: 'islands theme'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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 checkboxes.
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">Size m</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'name1',
val: 'val_1',
text: 'Size 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="checkbox" aria-checked="false" type="button"><span class="button__text">Size 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: 'Size 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">Size l</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'l'
},
name: 'name2',
val: 'val_2',
text: 'Size 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="checkbox" aria-checked="false" type="button"><span class="button__text">Size 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: 'Size l'
}
[
{
block: 'checkbox',
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<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="checkbox" aria-checked="false" type="button"><span class="button__text">Candies</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: 'Candies'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
val field
Type: String, Number.
Specifies the checkbox value to send to the server.
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="checkbox" aria-checked="false" type="button"><span class="button__text">Candies</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: 'Candies'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
text field
Type: String.
Specifies checkbox lable or the text on the button if the type modifier with the button value is set to the block.
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">Candies</span></label>
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm'
},
name: 'name1',
val: '1',
text: 'Candies'
}
[
{
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="checkbox" aria-checked="false" type="button"><span class="button__text">Candies</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: 'Candies'
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
icon field
Type: BEMJSON.
Specifies the icon on the checkbox implemented by the button (the type modifier is set to 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="checkbox" aria-checked="true" type="button"><span class="icon icon_social_twitter"></span><span class="button__text">Share</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: 'Share',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
title field
Type: String.
Specifies the tooltip content. The tooltip appearance depends on the browser and your operating system settings. You cannot change it applying HTML or different styles.
Use the title field for checkboxes only with the type modifier set to 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="checkbox" aria-checked="true" title="Share with friends" type="button"><span class="icon icon_social_twitter"></span><span class="button__text">Share</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: 'Share',
title: 'Share with friends',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
tabIndex field
Type: Number.
Specifies the tab order when pressing Tab to navigate between controls on a page.
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="checkbox" aria-checked="false" type="button"><span class="button__text">Candies</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: 'Candies',
tabIndex: 3
}
[
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]