RadioGroup
Widget

A container for a set of related Radio buttons, allowing the user to select exactly one option from the group. Provide the choices via the convenient options shorthand or as individual Radio child items. The group's value reflects the selected radio button's value and can be read from a parent container's values. Set clearable to allow unchecking the current selection.

new RadioGroup({
    title   : 'Resolve Conflict',
    name    : 'resolution',
    value   : 'A',
    options : {
        A : 'Keep the original version',
        B : 'Use the new version',
        C : 'Reconcile individual conflicts'
    }
});

Nested Items

Radio buttons can also have a container of additional items. These items can be displayed immediately following the field's label (which is the default when there is only one item) or below the radio button. This can be controlled using the inline config.

In the demo below notice how additional fields are displayed for the checked radio button:

Useful configs and properties

Config / Property	Description
options	Object mapping values to display labels
name	Name used when reading/writing container values
clearable	Allow unchecking the currently selected radio button
value	The value of the currently checked radio button

Configs

Configs are options you supply in a configuration object when creating an instance of this class

clearable : Booleanfalse

Set this to true so that clicking the currently checked radio button will clear the check from all radio buttons in the group.
name : String

The name by which this widget's value is accessed using the parent container's values.

It is used to set the name of the child radio buttons.

If not provided, it will be set to the ref or id of the widget.

options : Object<String, String | RadioConfig>

The set of radio button options for this radio button group. This is a shorthand for defining these in the items. The keys of this object hold the radio button's checkedValue while the object values are a string for the radio button's text or a config object for that radio button.

The value of this radio button group will be one of the keys in this object or null if no radio button is checked.

For example, consider the following configuration:

 {
     type    : 'radiogroup',
     name    : 'resolution',
     value   : 'A',
     options : {
         A : 'Keep the original version',
         B : 'Use the new version',
         C : 'Reconcile individual conflicts'
     }
 }

The above is equivalent to this configuration below using items:

 {
     type  : 'radiogroup',
     items : [{
         text         : 'Keep the original version',
         name         : 'resolution',
         ref          : 'resolution_A',
         checked      : true,
         checkedValue : 'A'
     }, {
         text         : 'Use the new version',
         name         : 'resolution',
         ref          : 'resolution_B',
         checkedValue : 'B'
     }, {
         text         : 'Reconcile individual conflicts',
         name         : 'resolution',
         ref          : 'resolution_C',
         checkedValue : 'C'
     }]
 }

value : String

This property corresponds to the checkedValue of the currently checked radio button.

Has a corresponding runtime value property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isRadioGroup : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of RadioGroup class, or subclass thereof.

value : String

This property corresponds to the checkedValue of the currently checked radio button.

Has a corresponding value config.
isRadioGroup : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of RadioGroup class, or subclass thereof.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-radio-group-gap	The gap between radio buttons in a group

RadioGroup
Widget

Nested Items

Useful configs and properties

See also

Configs

Properties

CSS variables

Source path

Inheritance tree6

Mixins8

Contents

RadioGroup Widget

Nested Items

Useful configs and properties

See also

Configs

Properties

CSS variables

Source path

Inheritance tree6

Mixins8

Contents

RadioGroup
Widget