Skip to content

Latest commit

 

History

History
439 lines (356 loc) · 10.3 KB

radio-group.en.md

File metadata and controls

439 lines (356 loc) · 10.3 KB
Raw

radio-group

Use this block for creating a group of related radio switches (based on the radio block).

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
type 'button', 'line' BEMJSON The type of the radio switches group.
disabled true BEMJSON, JS The disabled state.
focused true BEMJSON, JS The block is in focus.
theme 'islands' BEMJSON A custom design.
size 'm', 'l' BEMJSON The size of the radio switches group. Use sizes only for radio switches group when the theme modifier is set to islands.

Custom fields of the block

Field Type Description
name String The unique block name.
val Array A set of values of the selected radio switches.
options Array A set of values for each radio switch of the group. Each radio switch has its own set of values.

Block description

Use the radio-group block to control the size, state, and appearance of the radio switches in the group. The block allows to choose the only one radio switch from the group.

Modifiers of the block

type modifier

Acceptable values: 'button', 'line'.

Use case: BEMJSON.

Button-based radio-group (type modifier with button value)

Implements the radio-group block using the button-based radio switches.

Grouped button-based radio switches are always aligned in a line.

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-button',
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

Line-aligned radio-group (type modifier with line value)

The modifier aligns all radio switches of the group in a line.

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'line' },
    name : 'radio-line',
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

disabled modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier makes the block inactive. The disabled block is visible but not available for user actions.

The modifier could be applied to:

  • The radio-group:
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', disabled : true },
    name : 'radio',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button', disabled : true },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
  • The separate radio switch of the group:
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-line',
    val : 2,
    options : [
        { val : 1, text : 'Football', disabled : true },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-line',
    val : 2,
    options : [
        { val : 1, text : 'Football', disabled : true },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

focused modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier puts the focus on the block.

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button', focused : true },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', focused : true },
    name : 'radio',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

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-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

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-groups.

m

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

l

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'l' },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'l', type : 'button' },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

Custom fields of the block

name field

Type: String

Specifies the block unique name.

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

val field

Type: Array.

Specifies a set of values for the selected radio switches.

{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-button',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball' }
    ]
}

options field

Type: Array

Specifies a set of values for each radio switch of the group.

Each radio switch has its own set of values.

Field Type description
val String, Number The value to send to the server if the radio switch is selected.
text String The radio switch label, or the button label if the type modifier is set to button.
disabled Boolean A disabled state.
icon BEMJSON The radio switch icon, which is created by the icon block. Use icons only for radio switches with the type modifier set to button.
title String Tooltip content. Use tooltips only for radio switches with type modifier set to button.
id String The radio switch unique ID. 
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm' },
    name : 'radio-islands',
    val : 2,
    options : [
        { val : 1, text : 'Football' },
        { val : 2, text : 'Basketball' },
        { val : 3, text : 'Handball', disabled : true }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 3,
    options : [
        {
            val : 1,
            text : 'Football',
            title : 'View standings'
        },
        {
            val : 2,
            disabled : true,
            text : 'Basketball',
            title : 'View standings'
        },
        {
            val : 3,
            disabled : true,
            text : 'Handball',
            title : 'View standings'
        }
    ]
}
{
    block : 'radio-group',
    mods : { theme : 'islands', size : 'm', type : 'button' },
    name : 'radio-islands',
    val : 1,
    options : [
        {
            val : 1,
            text : 'Football news',
            title : 'Subscribe to the news',
            icon : {
                block : 'icon',
                mods : { social : 'twitter' }
            },
        },
        {
            val : 2,
            disabled : true,
            text : 'Handball news',
            title : 'Subscribe to the news',
            icon : {
                block : 'icon',
                mods : { social : 'twitter' }
            }
        }
    ]
}