Skip to content

Latest commit

 

History

History
374 lines (280 loc) · 8.33 KB

radio.en.md

File metadata and controls

374 lines (280 loc) · 8.33 KB
Raw

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.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

checked modifier

Acceptable value: true.

Use case: BEMJSON, JS.

Use the checked modifier with the true value to select the radio switch.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', checked : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button', checked : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

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.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', disabled : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button', disabled : true },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

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.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

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

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

l

{
    block : 'radio',
    mods : { theme : 'islands', size : 'l' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'l', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

Custom fields of the block

name field

Type: String.

Specifies the block unique name.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

val field

Type: String, Number.

Specifies the radio switch value to send to the server.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

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.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}
{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML'
}

icon field

Type: BEMJSON.

Specifies the icon on the radio switch implemented by the button (the type modifier is set to button).

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'twitter',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

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.

{
    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' }
    }
}

tabIndex field

Type: Number.

Specifies the tab order when pressing Tab to navigate between controls on a page.

{
    block : 'radio',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 'BEMHTML',
    text : 'Use BEMHTML',
    tabIndex : 3
}