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.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'button',
    val: 'val_1',
    text : 'Candies'
}

checked modifier

Acceptable value: true.

Use case: BEMJSON, JS.

Use the checked modifier with the true value to select the checkbox.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', checked : true },
    name: 'name1',
    val : 'val_1',
    text : 'Candies'
}

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name: 'name2',
    val : 'val_2',
    text : 'Candies'
}

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.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', disabled : true },
    name: 'name1',
    val : 'val_0',
    text : 'Candies'
}

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', disabled : true },
    name: 'name2',
    val : 'val_1',
    text : 'Candies'
}

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.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm' },
    name: 'islands',
    val: 'val_3',
    text : 'islands theme'
}

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

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm' },
    name: 'name1',
    val: 'val_1',
    text : 'Size m'
}

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: 'val_1',
    text : 'Size m'
}

l

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'l' },
    name: 'name2',
    val: 'val_2',
    text : 'Size l'
}

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'l', type : 'button' },
    name: 'name1',
    val: 'val_1',
    text : 'Size l'
}

Custom fields of the block

name field

Type: String.

Specifies the block unique name.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: 'val_1',
    text : 'Candies'
}

val field

Type: String, Number.

Specifies the checkbox value to send to the server.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name2',
    val: 'val_2',
    text : 'Candies'
}

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.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm' },
    name: 'name1',
    val: '1',
    text : 'Candies'
}

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: '1',
    text : 'Candies'
}

icon field

Type: BEMJSON.

Specifies the icon on the checkbox implemented by the button (the type modifier is set to button).

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name: 'name1',
    val : 1,
    text : 'Share',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

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.

{
    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' }
    }
}

tabIndex field

Type: Number.

Specifies the tab order when pressing Tab to navigate between controls on a page.

{
    block : 'checkbox',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name: 'name1',
    val: '1',
    text : 'Candies',
    tabIndex : 3
}