radio
Use this block as a part of the radio-group block for creating a single radio switch.
Overview
Modifiers of the block
Modifier |
Acceptable values |
Use cases |
Description |
type |
'button' |
BEMJSON |
The type of the radio switch. |
checked |
true |
BEMJSON , JS |
Selection of the radio switch. |
disabled |
true |
BEMJSON , JS |
The disabled state. |
focused |
true |
BEMJSON , JS |
The block is in focus. |
hovered |
true |
– |
The hovered state. |
theme |
'islands' |
BEMJSON |
A custom design. |
size |
'm' , 'l' |
BEMJSON |
The size of the radio switch. Use sizes only for radio switches when the theme modifier is set to islands. |
Custom fields of the block
Field |
Type |
Description |
name |
String |
The unique block name. |
val |
String , Number |
The value to send to the server if the radio switch is selected. |
text |
String |
Radio switch lable. |
icon |
BEMJSON |
Radio switch icon. It is created by the icon block. Use icons only for radio switches when the type modifier is set to button. |
title |
String |
Tooltip content. Use tooltips only for radio switches when the type modifier is set to button. |
tabIndex |
Number |
The order when navigating through controls on a page by pressing the Tab key. |
Block descriptopn
Use the radio
block to control the size, state and appearance of the single radio switch.
Modifiers of the block
type
modifier
Acceptable value: 'button'
.
Use case: BEMJSON
.
Use the type
modifier with the button
value to change the appearance of the block: the radio switch is implemented by the button block. Press the button to select the radio switch.
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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
checked
modifier
Acceptable value: true
.
Use case: BEMJSON
, JS
.
Use the checked
modifier with the true
value to select the radio switch.
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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
checked: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use 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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
checked: true
}
}
]
deps
disabled
modifier
Acceptable value: true
.
Use case: BEMJSON
, JS
.
The modifier makes the block inactive. The disabled block is visible but not available for user actions.
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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use 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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
disabled: true
}
}
]
deps
focused
modifier
Acceptable value: true
.
Use case: BEMJSON
, JS
.
The modifier puts the focus on the block.
{
block : 'radio',
mods : { theme : 'islands', size : 'm', focused : true },
name : 'radio-islands',
val : 'BEMHTML',
text : 'Use BEMHTML'
}
{
block : 'radio',
mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
name : 'radio-islands',
val : 'BEMHTML',
text : 'Use BEMHTML'
}
hovered
modifier
Acceptable value: true
.
Use case: – .
The modifier is added to the block automatically at the moment when you mouse it over.
theme
modifier
Acceptable value: 'islands'
.
Use case: BEMJSON
.
The modifier gives the block a custom design.
The islands
theme requires the size modifier.
Open in a new window<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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use 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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
size
modifier
Acceptable values for the islands
theme: 'm'
, 'l'
.
Use case: BEMJSON
.
Use the size
modifier only for blocks with the islands
theme.
Sets the size value for all types of radio switches.
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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use 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">Use 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: 'Use 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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'l'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use 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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'l',
type: 'button'
}
}
]
deps
Custom fields of the block
name
field
Type: String
.
Specifies the block unique name.
Open in a new window<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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
val
field
Type: String
, Number
.
Specifies the radio switch value to send to the server.
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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
text
field
Type: String
.
Specifies the radio switch lable or the text on the button if the type modifier with the button value is set to the block.
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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use 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">Use 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: 'Use BEMHTML'
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
icon
field
Type: BEMJSON
.
Specifies the icon on the radio switch implemented by the button (the type modifier is set to 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
field
Type: String
.
Specifies the tooltip content. The tooltip appearance depends on the browser and your operating system settings. You cannot change it applying HTML or different styles.
Use the title
field for radio switches only with the type modifier set to 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="Share in Twitter" 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: 'Share in Twitter',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm',
type: 'button'
}
}
]
deps
tabIndex
field
Type: Number
.
Specifies the tab order when pressing Tab to navigate between controls on a page.
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">Use BEMHTML</span></label>
HTML{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
},
name: 'radio-islands',
val: 'BEMHTML',
text: 'Use BEMHTML',
tabIndex: 3
}
BEMJSON[
{
block: 'radio',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps