Skip to main content

Radio list

We also might want to show a list of multiple radio buttons defined.

{
"component": "radio_list",
"label": "Which one ?",
"list": [
{
"value": "this_one",
"label": "This one"
},
{
"value": "this_other_one",
"label": "This other one"
},
{
"value": "this_extra_one",
"label": "This extra one"
}
]
}

In this case, the value in the data will be the value defined in the list item. The list must be an array of elements containing at least a value and a label property.

{
"component": "radio_list",
"label": "Which one ?",
"inline": false,
"list": [
{
"value": "this_one",
"label": "This one"
},
{
"value": "this_other_one",
"label": "This other one"
},
{
"value": "this_extra_one",
"label": "This extra one"
}
]
}

The inlineOptions property can also be set in order to visually display the options on the same line. The inline property also can be set to show the list visually aligned or below the label of the component.

Storybook Examples

Radio List#

Required Radio List#

Radio List Inline Options#

Radio List Options Disable#

Radio List With Default Value#

Radio List With Translations#