radio
Используется в составе блока radio-group для создания радиопереключателей.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| type |
'button' |
BEMJSON |
Тип радиопереключателя. |
| checked |
true |
BEMJSON, JS |
Выбор радиопереключателя. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| hovered |
true |
– |
Наведение курсором. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
'm', 'l' |
BEMJSON |
Размер радиопереключателя. |
Специализированные поля блока
Описание блока
Блок radio предоставляет возможность изменять состояние, содержимое и внешний вид радиопереключателей.
Модификаторы блока
Модификатор type
Допустимое значение: 'button'.
Способ использования: BEMJSON.
Задает внешний вид блока. В этом случае выбор радиопереключателя происходит нажатием на кнопку.
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор checked
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Используется для выбора радиопереключателя.
Open in a new window<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="BEMHTML" checked="checked"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
checked: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
checked: true
}
}
]
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML" checked="checked"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<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="BEMHTML" disabled="disabled"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML" disabled="disabled"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Выставляется автоматически при получении блока фокуса.
Отвечает за наличие фокуса на блоке.
{
block : 'radio',
mods : { theme : 'islands', size : 'm', focused : true },
name : 'radio-islands',
val : 'BEMHTML',
text : 'Использовать BEMHTML'
}
{
block : 'radio',
mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
name : 'radio-islands',
val : 'BEMHTML',
text : 'Использовать BEMHTML'
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор hovered
Допустимое значение: true.
Способы использования: – .
Выставляется блоку автоматически, когда курсор мыши находится в пределах контрола.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
Open in a new window<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="BEMHTML"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Модификатор size
Допустимые значения для темы islands: 'm', 'l'.
Способ использования: BEMJSON.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands.
m
Open in a new window<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="BEMHTML"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
l
Open in a new window<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-islands" value="BEMHTML"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l'
}
}
]
Open in a new window<label class="radio radio_theme_islands radio_size_l radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет уникальное имя радиопереключателя.
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле val
Тип: String, Number.
Определяет значение радиопереключателя, которое будет отправлено на сервер.
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле text
Тип: String.
Определяет текст подписи к радиопереключателю или текст кнопки, если указан модификатор type в значении button.
Open in a new window<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="BEMHTML"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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">Использовать BEMHTML</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле icon
Тип: BEMJSON.
Определяет иконку, которая отображается с помощью блока icon.
Используется только для радиопереключателей с модификатором type в значении button.
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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="icon icon_social_twitter"></span><span class="button__text">twitter</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'twitter',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле title
Тип: String.
Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
Используется только для радиопереключателей с модификатором type в значении button.
Open in a new window<label class="radio radio_theme_islands radio_size_m radio_type_button 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="icon icon_social_twitter"></span><span class="button__text">twitter</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-islands" value="BEMHTML"></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'twitter',
title: 'Кнопка выбора социальной сети',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
Поле tabIndex
Тип: Number.
Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.
Open in a new window<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="BEMHTML"></span><span class="radio__text" role="presentation">Использовать BEMHTML</span></label>
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML',
tabIndex: 3
}
[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]