radio-group
Use this block for creating a group of related radio switches (based on the radio block).
Overview
Modifiers of the block
Modifier |
Acceptable values |
Use cases |
Description |
type |
'button' , 'line' |
BEMJSON |
The type of the radio switches 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 the radio switches group. Use sizes only for radio switches group when the theme modifier is set to islands. |
Custom fields of the block
Field |
Type |
Description |
name |
String |
The unique block name. |
val |
Array |
A set of values of the selected radio switches. |
options |
Array |
A set of values for each radio switch of the group. Each radio switch has its own set of values. |
Block description
Use the radio-group
block to control the size, state, and appearance of the radio switches in the group. The block allows to choose the only one radio switch from the group.
Modifiers of the block
type
modifier
Acceptable values: 'button'
, 'line'
.
Use case: BEMJSON
.
Button-based radio-group (type
modifier with button
value)
Implements the radio-group
block using the button-based radio switches.
Grouped button-based radio switches are always aligned in a line.
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></label><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Handball</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-button',
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Line-aligned radio-group (type
modifier with line
value)
The modifier aligns all radio switches of the group in a line.
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_line control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_line radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><label class="radio radio_type_line radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="2"></span><span class="radio__text" role="presentation">Basketball</span></label>
<label
class="radio radio_type_line radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
},
name: 'radio-line',
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
}
}
]
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 could be applied to:
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_disabled control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio" value="1" disabled="disabled"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked radio_disabled i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio" value="2" checked="checked" disabled="disabled"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio" value="3" disabled="disabled"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'radio',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button radio-group_disabled control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1" disabled="disabled"></label><label class="radio radio_type_button radio_theme_islands radio_size_m radio_checked radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled" aria-pressed="true"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked" disabled="disabled"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled" aria-pressed="false"><span class="button__text">Handball</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="3" disabled="disabled"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
deps
- The separate radio switch of the group:
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="1" disabled="disabled"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-line',
val: 2,
options: [
{
val: 1,
text: 'Football',
disabled: true
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-line" value="1" disabled="disabled"></label><label class="radio radio_type_button radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-line" value="2" checked="checked"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Handball</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-line" value="3"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-line',
val: 2,
options: [
{
val: 1,
text: 'Football',
disabled: true
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
focused
modifier
Acceptable value: true
.
Use cases: BEMJSON
, JS
.
The modifier puts the focus on the block.
{
block : 'radio-group',
mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
name : 'radio-button',
val : 2,
options : [
{ val : 1, text : 'Football' },
{ val : 2, text : 'Basketball' },
{ val : 3, text : 'Handball' }
]
}
{
block : 'radio-group',
mods : { theme : 'islands', size : 'm', focused : true },
name : 'radio',
val : 2,
options : [
{ val : 1, text : 'Football' },
{ val : 2, text : 'Basketball' },
{ val : 3, text : 'Handball' }
]
}
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<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="1"></label><label class="radio radio_type_button radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="2" checked="checked"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Handball</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-islands" value="3"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
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 radio-groups.
m
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></label><label class="radio radio_type_button radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Handball</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
l
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_l control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_l radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_l radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></label><label class="radio radio_type_button radio_theme_islands radio_size_l radio_checked i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_l i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Handball</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
deps
Custom fields of the block
name
field
Type: String
Specifies the block unique name.
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
val
field
Type: Array
.
Specifies a set of values for the selected radio switches.
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="3"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
options
field
Type: Array
Specifies a set of values for each radio switch of the group.
Each radio switch has its own set of values.
Field |
Type |
description |
val |
String , Number |
The value to send to the server if the radio switch is selected. |
text |
String |
The radio switch label, or the button label if the type modifier is set to button . |
disabled |
Boolean |
A disabled state. |
icon |
BEMJSON |
The radio switch icon, which is created by the icon block. Use icons only for radio switches with the type modifier set to button . |
title |
String |
Tooltip content. Use tooltips only for radio switches with type modifier set to button . |
id |
String |
The radio switch unique ID. |
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="1"></span>
<span
class="radio__text" role="presentation">Football</span>
</label><br><label class="radio radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="2" checked="checked"></span><span class="radio__text" role="presentation">Basketball</span></label><br>
<label
class="radio radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><span class="radio__box"><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="3" disabled="disabled"></span><span class="radio__text" role="presentation">Handball</span></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Football'
},
{
val: 2,
text: 'Basketball'
},
{
val: 3,
text: 'Handball',
disabled: true
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" title="View standings" type="button" aria-pressed="false"><span class="button__text">Football</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="1"></label><label class="radio radio_type_button radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" title="View standings" type="button" disabled="disabled" aria-pressed="false"><span class="button__text">Basketball</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="2" disabled="disabled"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m radio_checked radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" title="View standings" type="button" disabled="disabled" aria-pressed="true"><span class="button__text">Handball</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="3" checked="checked" disabled="disabled"></label>
</span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 3,
options: [
{
val: 1,
text: 'Football',
title: 'View standings'
},
{
val: 2,
disabled: true,
text: 'Basketball',
title: 'View standings'
},
{
val: 3,
disabled: true,
text: 'Handball',
title: 'View standings'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m radio_checked i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" title="Subscribe to the news" type="button" aria-pressed="true"><span class="icon icon_social_twitter"></span>
<span
class="button__text">Football news</span>
</button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="1" checked="checked"></label><label class="radio radio_type_button radio_theme_islands radio_size_m radio_disabled i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_disabled button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" title="Subscribe to the news" type="button" disabled="disabled" aria-pressed="false"><span class="icon icon_social_twitter"></span><span class="button__text">Handball news</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="2" disabled="disabled"></label></span>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 1,
options: [
{
val: 1,
text: 'Football news',
title: 'Subscribe to the news',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
},
{
val: 2,
disabled: true,
text: 'Handball news',
title: 'Subscribe to the news',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps