radio-group
Используется для отображения группы однотипных переключателей, реализованных блоком radio.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| type |
'button', 'line' |
BEMJSON |
Тип группы радиопереключателей. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
'm', 'l' |
BEMJSON |
Размер радиопереключателей в группе. Используется только для радиопереключателей с модификатором theme в значении islands. |
Специализированные поля блока
Обзор блока
Блок radio-group позволяет управлять внешним видом и состоянием вложенных радиопереключателей и выбирать только один пункт из предопределенного списка.
Модификаторы блока
Модификатор type
Допустимые значения: 'button', 'line'.
Способ использования: BEMJSON.
Кнопочный радиопереключатель (модификатор type в значении button)
Позволяет реализовать блок radio-group с помощью радиопереключателей с типом button. Все радиопереключатели группы в данном случае всегда располагаются в линию.
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">Футбол</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">Баскетбол</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">Гандбол</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-button',
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Выравнивание (модификатор type в значении 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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
},
name: 'radio-line',
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Модификатор может быть установлен:
- всей группе радиопереключателей
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'radio',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
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">Футбол</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">Баскетбол</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">Гандбол</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="3" disabled="disabled"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
- отдельному радиопереключателю в группе
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-line',
val: 2,
options: [
{
val: 1,
text: 'Футбол',
disabled: true
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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">Футбол</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">Баскетбол</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">Гандбол</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-line" value="3"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-line',
val: 2,
options: [
{
val: 1,
text: 'Футбол',
disabled: true
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за наличие фокуса на блоке.
Выставляется автоматически при получении блоком фокуса.
{
block : 'radio-group',
mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
name : 'radio-button',
val : 2,
options : [
{ val : 1, text : 'Футбол' },
{ val : 2, text : 'Баскетбол' },
{ val : 3, text : 'Гандбол' }
]
}
{
block : 'radio-group',
mods : { theme : 'islands', size : 'm', focused : true },
name : 'radio',
val : 2,
options : [
{ val : 1, text : 'Футбол' },
{ val : 2, text : 'Баскетбол' },
{ val : 3, text : 'Гандбол' }
]
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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">Футбол</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">Баскетбол</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">Гандбол</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-islands" value="3"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор size
Допустимые значения для темы islands: 'm', 'l'.
Способ использования: BEMJSON.
Задает размер всем радиопереключателям в группе.
Необходимо использовать с модификатором theme в значении islands.
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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">Футбол</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">Баскетбол</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">Гандбол</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l'
}
}
]
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">Футбол</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">Баскетбол</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">Гандбол</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет имя группы радиопереключателей.
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле val
Тип: String, Number.
Определяет значение выбранного радиопереключателя.
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле options
Тип: Array.
Определяет набор значений для каждого радиопереключателя группы.
Каждому типу радиопереключателей соответствует разный набор значений.
| Поле |
Тип |
Описание |
val |
String, Number |
Значение радиопереключателя, которое будет отправлено на сервер, если он выбран. |
text |
String |
Текст подписи к радиопереключателю. |
disabled |
Boolean |
Неактивное состояние. |
icon |
BEMJSON |
Иконка. Формируется блоком icon. Используется только с модификатором type в значении button. |
title |
String |
Текст всплывающей подсказки. Используется только с модификатором type в значении button. |
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">Футбол</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">Баскетбол</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">Гандбол</span></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол',
disabled: true
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
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="Просмотр турнирной таблицы и состава команд." type="button" aria-pressed="false"><span class="button__text">Футбол</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="Просмотр турнирной таблицы и состава команд." type="button" disabled="disabled" aria-pressed="false"><span class="button__text">Баскетбол</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="Просмотр турнирной таблицы и состава команд." type="button" disabled="disabled"
aria-pressed="true"><span class="button__text">Гандбол</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="3" checked="checked" disabled="disabled"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 3,
options: [
{
val: 1,
text: 'Футбол',
title: 'Просмотр турнирной таблицы и состава команд.'
},
{
val: 2,
disabled: true,
text: 'Баскетбол',
title: 'Просмотр турнирной таблицы и состава команд.'
},
{
val: 3,
disabled: true,
text: 'Гандбол',
title: 'Просмотр турнирной таблицы и состава команд.'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
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="Подписаться на новости в группе" type="button" aria-pressed="true"><span class="icon icon_social_twitter"></span>
<span
class="button__text">Новости по футболу</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="Подписаться на новости в группе" type="button" disabled="disabled" aria-pressed="false"><span class="icon icon_social_twitter"></span><span class="button__text">Новости по гандболу</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="2" disabled="disabled"></label></span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 1,
options: [
{
val: 1,
text: 'Новости по футболу',
title: 'Подписаться на новости в группе',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
},
{
val: 2,
disabled: true,
text: 'Новости по гандболу',
title: 'Подписаться на новости в группе',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]