control-group
Use this block as a wrapper block for blocks visual grouping. Blocks that need grouping should be placed in content field of block BEMJSON declaration.
Use cases
The control-group allows a user to group the following blocks:
Open in a new window<div class="control-group" role="group"><span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Name" type="search"></span></span>
<span
class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Surname" type="search"></span></span><span class="input input_theme_islands input_size_m input_type_search i-bem"
data-bem='{"input":{}}'><span class="input__box"><input class="input__control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Email" type="search"></span></span>
</div>
{
block: 'control-group',
content: [
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Name'
},
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Surname'
},
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Email'
}
]
}
[
'control-group',
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
}
]
Open in a new window<div class="control-group" role="group"><button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">View Cart</span></button><button class="button button_theme_islands button_size_m button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Create a wish list</span></button><button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">View your balance</span></button></div>
{
block: 'control-group',
content: [
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'View Cart'
},
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Create a wish list'
},
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'View your balance'
}
]
}
[
'control-group',
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="control-group" role="group"><span class="input input_theme_islands input_size_m input_type_search i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Enter your question" type="search"></span></span>
<button
class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Search</span></button>
</div>
{
block: 'control-group',
content: [
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
},
placeholder: 'Enter your question'
},
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Search'
}
]
}
[
'control-group',
{
block: 'input',
mods: {
theme: 'islands',
size: 'm',
type: 'search'
}
},
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="control-group" role="group"><span class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Price from"></span></span>
<span
class="input input_theme_islands input_size_m i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="to"></span></span>
<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{}}'><input class="select__control" type="hidden" value="usd" 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="uniq14953610398373">$</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":"usd"}}' role="menuitemradio" id="uniq14953610398371" aria-checked="true">$</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":"euro"}}' role="menuitemradio" id="uniq14953610398372" aria-checked="false">€</div>
</div>
</div>
</div>
</div>
{
block: 'control-group',
content: [
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Price from'
},
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'to'
},
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
val: 'usd',
options: [
{
val: 'usd',
text: '$'
},
{
val: 'euro',
text: '€'
}
]
}
]
}
[
'control-group',
{
block: 'input',
mods: {
theme: 'islands',
size: 'm'
}
},
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
- dropdown (
switcher modifier with button value)
Open in a new window<div class="control-group" role="group"><button class="button button_view_action button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Buy now!</span></button>
<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem"
data-bem='{"popup":{},"dropdown":{"id":"uniq14953610397241"}}' aria-hidden="true">Take advantage of our special offer: ”50% discount on every fifth cargo delivery.“</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Sales</span></button></div>
{
block: 'control-group',
content: [
{
block: 'button',
mods: {
view: 'action',
theme: 'islands',
size: 'm'
},
text: 'Buy now!'
},
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'Sales',
popup: 'Take advantage of our special offer: ”50% discount on every fifth cargo delivery.“'
}
]
}
[
'control-group',
{
block: 'button',
mods: {
view: 'action',
theme: 'islands',
size: 'm'
}
},
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
- checkbox (
type modifier with button value)
Open in a new window<div class="control-group" role="group"><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="button" type="button" aria-pressed="false"><span class="button__text">TV sets</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="tv" value="1"></label>
<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="button" type="button" aria-pressed="false"><span class="button__text">Cameras</span></button><input class="checkbox__control"
type="checkbox" autocomplete="off" name="photo" value="1"></label><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="button" type="button" aria-pressed="false"><span class="button__text">Electronic books</span></button><input class="checkbox__control" type="checkbox" autocomplete="off" name="book" value="1"></label></div>
{
block: 'control-group',
content: [
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'tv',
val: '1',
text: 'TV sets'
},
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'photo',
val: '1',
text: 'Cameras'
},
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'book',
val: '1',
text: 'Electronic books'
}
]
}
[
'control-group',
{
block: 'checkbox',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]