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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
checked: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
checked: true
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Модификатор 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'l'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
deps
Специализированные поля блока
Поле 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'twitter',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'twitter',
title: 'Кнопка выбора социальной сети',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
Поле 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>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Использовать BEMHTML',
tabIndex: 3
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps