PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Checkboxset component

The Checkboxset component implements a group of <input type="checkbox"> or <input type="radio"> selection elements.

Configuration options

Option Description Type Default
class Path to the PHP class responsible for the backend implementation of the component. String Magento\Ui\Component\Form\Element\CheckboxSet
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 true
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 Checkboxset component with the Form component

This is an example of how the Checkboxset 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>
        ...
        <checkboxset name="checkboxset_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">Checkboxset 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>
        </checkboxset>
    </fieldset>
</form>

Result

Checkboxset Component Example

© 2021 Adobe. All rights reserved.