select
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.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Agenda"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select1" value="3" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581840144">Workshop, Round-table conference</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581840141" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581840142" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581840143" aria-checked="true">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
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.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select2"}}'><input class="select__control" type="hidden" name="select2" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581836364">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581836361" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581836362" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581836363" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
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.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"—"}}'><input class="select__control" type="hidden" name="select3" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581820514">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581820511" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581820512" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581820513" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
deps
width
modifier
Acceptable value: 'available'
.
Use case: BEMJSON
.
Use to set the maximum available width of the button.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m select_width_available i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581825664">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581825661" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581825662" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581825663" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
deps
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<div class="select select_mode_radio-check select_theme_islands select_size_m select_disabled i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" disabled="disabled" autocomplete="off"><button class="button button_size_m button_theme_islands button_disabled button_checked button__control i-bem" data-bem='{"button":{}}' role="button"
type="button" disabled="disabled"><span class="button__text" id="uniq14953581838134">Workshop</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}'
aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_disabled menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' role="menu" aria-disabled="true">
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581838131" aria-disabled="true" aria-checked="false">Report</div>
<div class="menu__item menu__item_disabled menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581838132" aria-disabled="true" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581838133" aria-disabled="true" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581849534">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581849531" aria-disabled="true" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581849532" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581849533" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
deps
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.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581846004">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581846001" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581846002" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581846003" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
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.
s
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_s i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_s button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581850954">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_s menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581850951" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581850952" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581850953" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 's'
}
}
]
deps
m
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581846004">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581846001" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581846002" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581846003" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
l
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_l i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_l button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581834834">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_l menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581834831" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581834832" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581834833" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'l'
}
}
]
deps
xl
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_xl i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_xl button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581844754">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_xl menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581844751" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581844752" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581844753" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
}
}
]
deps
Custom fields of the block
name
field
Type: String
.
Specifies the unique name of the block.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="1" autocomplete="off"><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581822444">Report</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581822441" aria-checked="true">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581822442" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581822443" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
val
field
Type: String
, Number
, Array
.
Specifies:
- The selected value from the dropdown menu. In this case the field type is
String
or Number
.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581846004">Workshop</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581846001" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581846002" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581846003" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps
- 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
.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Agenda"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select1" value="3" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581840144">Workshop, Round-table conference</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581840141" aria-checked="false">Report</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581840142" aria-checked="true">Workshop</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581840143" aria-checked="true">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
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.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"Training"}}'><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581832554">Training</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581832551" aria-checked="false">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581832552" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581832553" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
deps
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Select a training"}}'><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581826534">Select a training</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581826531" aria-checked="false">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581826532" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581826533" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
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. |
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","text":"Subscribe"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581837293">VKontakte</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581837291" aria-checked="false"><span class="icon icon_social_twitter"></span>Twitter</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581837292" aria-checked="true"><span class="icon icon_social_vk"></span>VKontakte</div>
</div>
</div>
</div>
HTML{
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'
}
}
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
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. |
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","text":"A conference agenda"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select5" value="5" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581847876">Report #2, Workshop #2</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__group" role="group" aria-labelledby="uniq14953581847877">
<div class="menu__group-title" role="presentation" id="uniq14953581847877">Theory</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581847871" aria-checked="false">Report #1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581847872" aria-checked="true">Report #2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581847873" aria-checked="false">Report #3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953581847878">
<div class="menu__group-title" role="presentation" id="uniq14953581847878">Practice</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemcheckbox" id="uniq14953581847874" aria-checked="false">Workshop #1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":5}}' role="menuitemcheckbox" id="uniq14953581847875" aria-checked="true">Workshop #2</div>
</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
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.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","optionsMaxHeight":100,"text":"A conference agenda"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select5" value="5" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953581823316">Report #2, Workshop #2</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__group" role="group" aria-labelledby="uniq14953581823317">
<div class="menu__group-title" role="presentation" id="uniq14953581823317">Theory</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953581823311" aria-checked="false">Report #1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953581823312" aria-checked="true">Report #2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953581823313" aria-checked="false">Report #3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953581823318">
<div class="menu__group-title" role="presentation" id="uniq14953581823318">Practice</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemcheckbox" id="uniq14953581823314" aria-checked="false">Workshop #1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":5}}' role="menuitemcheckbox" id="uniq14953581823315" aria-checked="true">Workshop #2</div>
</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
deps
id
field
Type: String
.
Specifies the block unique ID.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="1" autocomplete="off"><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" id="Unique_1" type="button"><span class="button__text" id="uniq14953581848784">Report</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953581848781" aria-checked="true">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953581848782" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953581848783" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
deps