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.
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
:
app/code/Magento/Ui/view/base/web/js/form/element/checkbox-set.js
app/code/Magento/Ui/view/base/web/templates/form/element/checkbox-set.html
app/code/Magento/Ui/Component/Form/Element/CheckboxSet.php
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>