Skip to content

checkbox-group.en.md

Latest commit

 

History

History
418 lines (336 loc) · 10.2 KB

checkbox-group.en.md

File metadata and controls

418 lines (336 loc) · 10.2 KB

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.

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

A line-aligned checkbox group (type modifier with line value)

The modifier aligns all checkboxes of the group in a line.

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

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:

  • The checkbox-group:
{
    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', type : 'button', disabled : true },
    name : 'checkbox-button',
    options : [
        { val : 1, text : 'Block' },
        { val : 2, text : 'Element' },
        { val : 3, text : 'Modifier' }
    ]
}
  • The separate checkbox of the group:
{
    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', type : 'button' },
    name : 'checkbox-line',
    options : [
        { val : 1, text : 'Block', disabled : true },
        { val : 2, text : 'Element' },
        { val : 3, text : 'Modifier' }
    ]
}

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.

{
    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', type : 'button' },
    name : 'checkbox-islands',
    options : [
        { val : 1, text : 'Block' },
        { val : 2, text : 'Element' },
        { val : 3, text : 'Modifier' }
    ]
}

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

{
    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', type : 'button' },
    name : 'checkbox-button',
    val : [2, 3],
    options : [
        { val : 1, text : 'Block' },
        { val : 2, text : 'Element' },
        { val : 3, text : 'Modifier' }
    ]
}

l

{
    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', type : 'button' },
    name : 'checkbox-button',
    val : [2, 3],
    options : [
        { val : 1, text : 'Block' },
        { val : 2, text : 'Element' },
        { val : 3, text : 'Modifier' }
    ]
}

Custom fields of the block

name field

Type: String

Specifies the block unique name.

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

val field

Type: Array.

Specifies a set of values for the selected checkboxes.

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

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. 
{
    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', 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' },
    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' }
            },
        }
    ]
}