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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-button',
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Выравнивание (модификатор 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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
},
name: 'radio-line',
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'line'
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'radio',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
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">Футбол</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>
HTML{
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: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
deps
- отдельному радиопереключателю в группе
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>
HTML{
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: 'Гандбол'
}
]
}
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">Футбол</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>
HTML{
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: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
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">Футбол</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>
HTML{
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: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
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">Футбол</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>
HTML{
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: 'Гандбол'
}
]
}
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">Футбол</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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
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">Футбол</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>
HTML{
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: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
deps
Специализированные поля блока
Поле 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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-button',
val: 2,
options: [
{
val: 1,
text: 'Футбол'
},
{
val: 2,
text: 'Баскетбол'
},
{
val: 3,
text: 'Гандбол'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
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
}
]
}
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="Просмотр турнирной таблицы и состава команд." 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>
HTML{
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: 'Просмотр турнирной таблицы и состава команд.'
}
]
}
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="Подписаться на новости в группе" 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>
HTML{
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'
}
}
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps