PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Radioset component

The Radioset component is a shortcut for Checkboxset, with the input type set to the radio button.

Configuration options

Option Description Type Default
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/form/element/checkbox-set
multiple Set the input type in the UI: true for checkbox, false for radio button. Boolean false
options The array of the options to be displayed in the list for selection. Array []
template The path to the component’s .html template. String ui/form/element/checkbox-set

Source files

Extends Abstract:

Examples

Integrate the Radioset component with the Form component

This is an example of how the Radioset component integrates with the Form component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form>
    ...
    <fieldset>
        ...
        <radioset name="radioset_example">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="additionalInfo" xsi:type="string">Additional information</item>
                </item>
            </argument>
            <settings>
                <label translate="true">Radioset Component Example</label>
                <options>
                    <option name="0" xsi:type="array">
                        <item name="value" xsi:type="number">1</item>
                        <item name="label" xsi:type="string" translate="true">Option #1</item>
                    </option>
                    <option name="1" xsi:type="array">
                        <item name="value" xsi:type="number">2</item>
                        <item name="label" xsi:type="string" translate="true">Option #2</item>
                    </option>
                    <option name="2" xsi:type="array">
                        <item name="value" xsi:type="number">3</item>
                        <item name="label" xsi:type="string" translate="true">Option #3</item>
                    </option>
                </options>
            </settings>
        </radioset>
    </fieldset>
</form>

Result

Radioset Component Example