RadioGroup

The RadioGroup widget contains a set of related Radio button widgets.

Radio group

//<code-header>
fiddle.title = 'Radio group';
//</code-header>
new RadioGroup({
    appendTo : targetElement,
    name     : 'resolution',
    title    : 'Resolve Conflict',
    value    : 'A',  // the default choice
    options  : {
        A : 'Keep the original version',
        B : 'Use the new version',
        C : 'Reconcile individual conflicts'
    }
});

For example, to present three choices and have the user select one of them:

 {
     type    : 'radiogroup',
     title   : 'Resolve Conflict',
     name    : 'resolution', // optional, will be set to the `ref` or `id` of the widget if not provided
     value   : 'A',  // the default choice
     options : {
         A : 'Keep the original version',
         B : 'Use the new version',
         C : 'Reconcile individual conflicts'
     }
 }

Radio group

//<code-header>
fiddle.title = 'Radio group';
//</code-header>
new RadioGroup({
    appendTo : targetElement,
    name     : 'resolution',
    title    : 'Resolve Conflict',
    value    : 'A',  // the default choice
    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:

Nested radio group

//<code-header>
fiddle.title = 'Nested radio group';
//</code-header>
new RadioGroup({
    appendTo : targetElement,
    name     : 'radioItems',
    title    : 'Contextual Options',
    defaults : {
        autoCollapse : true
    },
    value   : 'A',
    options : {
        A : {
            text      : 'Single item',
            container : [{
                type        : 'textfield',
                placeholder : 'Additional info...',
                flex        : 1
            }]
        },

        B : {
            text      : 'Two items',
            inline    : true,  // can also use false to wrap a single item
            container : {
                from : {
                    type        : 'textfield',
                    placeholder : 'From...',
                    flex        : 1
                },
                to : {
                    type        : 'textfield',
                    placeholder : 'To...',
                    flex        : 1,
                    style       : 'margin-inline-start: 1em'
                }
            }
        },

        C : {
            text      : 'Child form',
            container : {
                from : {
                    type  : 'textfield',
                    label : 'From',
                    width : 'auto'
                },
                to : {
                    type  : 'textfield',
                    label : 'To',
                    width : 'auto'
                }
            }
        }
    }
});

Configs

116

Common

listenersEvents

Other

clearable: Boolean= false

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: StringAlso a property

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

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

drawerPanel

inlineFieldSet

inputFieldAlignContainer

labelPositionContainer

renditionContainer