select

February 6, 2015 · View on GitHub

Use this block for creating a dropdown menu with the possibility of single or multiple choice. The select block is implemented by a button and a dropdown menu list.

Overview

Modifiers of the block

Modifier	Acceptable values	Use cases	Description
mode	`'check'`, `'radio'`, `'radio-check'`	`BEMJSON`	The selection mode for the dropdown menu list.
width	`'available'`	`BEMJSON`	The button width.
disabled	`true`	`BEMJSON`, `JS`	The disabled state.
focused	`true`	`BEMJSON`, `JS`	The block is in focus.
theme	`'islands'`	`BEMJSON`	A custom design.
size	`'s'`, `'m'`, `'l'`, `'xl'`	`BEMJSON`	The size of the dropdown menu list. Use sizes only with the theme modifier set to islands.

Custom fields of the block

Field	Type	Description
name	`String`	The block unique name.
val	`String`, `Number`, `Array`	The selected value from the dropdown menu list. If the mode modifier with the check value is applied to the block, the selected values must be declared as an `array`.

text	`String`	Button lable if any menu item is not selected. Use for the button with the type modifier set to check or to radio-check.
options	`Array`	The array of the menu items.
optionsMaxHeight	`Number`	The maximum height of the dropdown menu.
id	`String`	The unique identifier of the block.

Block description

The select block is implemented by a button and a dropdown menu list.

The block in the focused state supports key-pad control:

If the dropdown menu list is hidden, type the menu item name on your keyboard to select the menu item. The name of the menu item appears in the select button.
If the dropdown menu list is shown, type the menu item name on your keyboard to set the focused state to this menu item. Use Space bar or Enter buttons to select the menu item.
To show the dropdown menu list, use Space bar, Enter, Up or Down buttons.

Modifiers of the block

`mode` modifier

Acceptable values: 'check, 'radio', 'radio-check'.

Use case: BEMJSON.

The mandatory modifier.

Multiple-choice list (`mode` modifier with `check` value)

Use to create the dropdown menu with the possibility to select any number of menu items.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Agenda',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

Mandatory single-choice list (`mode` modifier with `radio` value)

Use to create the dropdown menu that has one mandatory selected item.

If any item is not specified in BEMJSON as selected, the first menu item is selected by default.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select2',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

Optional single-choice list (`mode` modifier with `radio-check` value)

Use to create the menu with one mandatory selected item like in the mandatory single-choice list. The fundamental difference between these two menu types is that the menu block with the mode modifier set to radio-check has an opportunity to leave the menu without the selected items.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
    name : 'select3',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`width` modifier

Acceptable value: 'available'.

Use case: BEMJSON.

Use to set the maximum available width of the button.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm', width : 'available' },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`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 whole block

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm', disabled : true },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

The separate menu item

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Report', disabled : true },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`focused` modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier puts the focus on the block.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm', focused : true },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`theme` modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`size` modifier

Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.

Use case: BEMJSON.

Use the size modifier only for blocks with the islands theme.

Sets the size value for all types of dropdown menus.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 's' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'l' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'xl' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

Custom fields of the block

`name` field

Type: String.

Specifies the unique name of the block.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`val` field

Type: String, Number, Array.

Specifies:

The selected value from the dropdown menu. In this case the field type is String or Number.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

The set of selected values from the dropdown menu. This case is possible if the block has the mode modifier set to check. The field type is an Array.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Agenda',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`text` field

Type: String.

Specifies the button lable if any menu item is not selected.

Use for the button when the type modifier is set to check or to radio-check value.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
    name : 'select3',
    text : 'Training',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    text : 'Select a training',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

`options` field

Type: Array.

Specifies an array of the menu items or groups with an optional name.

Each menu item has its own set of values.

Field	Type	description
`val`	`String`, `Number`	The value to send to the server if the menu item is selected. The mandatory field.
`text`	`String`	Menu item lable.
`checkedText`	`String`	The text on the button that is shown instead of the selected menu item lable. Use only for a multiple-choice dropdown menu.
`disabled`	`Boolean`	The disabled state of the single menu item.
`icon`	`BEMJSON`	The icon created by the icon block. Use icons only for menu items with the type modifier set to button.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select5',
    val : [2],
    text : 'Subscribe',
    options : [
        {
            val : 1,
            text : 'Twitter',
            checkedText : 'tw',
            icon : { block : 'icon', mods : { social : 'twitter' } }
        },
        {
            val : 2,
            text : 'VKontakte',
            checkedText : 'vk',
            icon : { block : 'icon', mods : { social : 'vk' } }
        }
    ]
}

Dropdown menu items could be grouped:

Field	Type	description
`title`	`String`	The name of the menu items group.
`group`	`Array`	The array of the menu items.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select5',
    val : [2, 5],
    text : 'A conference agenda',
    options : [
        {
            title : 'Theory',
            group : [
                { val : 1, text : 'Report #1' },
                { val : 2, text : 'Report #2' },
                { val : 3, text : 'Report #3' },
            ]
        },
        {
            title : 'Practice',
            group : [
                { val : 4, text : 'Workshop #1' },
                { val : 5, text : 'Workshop #2' }
            ]
        }
    ]
}

`optionsMaxHeight` field

Type: Number.

Specifies the maximum height of the dropdown menu.

A vertical scrollbar appears automatically if all menu items cannot fit a specified popup height.

If a value of the optionsMaxHeight field is not specified, the popup height depends on the total height of all menu items.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select5',
    val : [2, 5],
    optionsMaxHeight : 100,
    text : 'A conference agenda',
    options : [
        {
            title : 'Theory',
            group : [
                { val : 1, text : 'Report #1' },
                { val : 2, text : 'Report #2' },
                { val : 3, text : 'Report #3' },
            ]
        },
        {
            title : 'Practice',
            group : [
                { val : 4, text : 'Workshop #1' },
                { val : 5, text : 'Workshop #2' }
            ]
        }
    ]
}

`id` field

Type: String.

Specifies the block unique ID.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    id : 'Unique_1',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}