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.
CheckboxToggleNotice component
The CheckboxToggleNotice component implements the Checkbox component with the ability to switch notice according to the selected option.
Configuration options
| Option | Description | Type | Default |
|---|---|---|---|
component |
The path to the component’s JS constructor in terms of RequireJS. | String | Magento_Ui/js/form/element/single-checkbox-toggle-notice |
notices |
The array of notices that should be associated by key with selected option value. | Array | [] |
tracks.notice |
Flags that enable tracking for the notice option. By default, the notice option is tracked to allow updating the notice message in the template. |
Boolean | true |
Source files
Extends the Checkbox component:
Example
Integrate the CheckboxToggleNotice component with the Form component
This example integrates the CheckboxToggleNotice component 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
31
32
<form>
...
<fieldset>
...
<field name="checkbox_toggle_notice_example" component="Magento_Ui/js/form/element/single-checkbox-toggle-notice" formElement="checkbox">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="default" xsi:type="number">0</item>
<item name="notices" xsi:type="array">
<item name="0" xsi:type="string" translate="true">Notice #1</item>
<item name="1" xsi:type="string" translate="true">Notice #2</item>
</item>
</item>
</argument>
<settings>
<dataType>boolean</dataType>
<label translate="true">Checkbox Toggle Notice</label>
</settings>
<formElements>
<checkbox>
<settings>
<valueMap>
<map name="false" xsi:type="number">0</map>
<map name="true" xsi:type="number">1</map>
</valueMap>
<prefer>toggle</prefer>
</settings>
</checkbox>
</formElements>
</field>
</fieldset>
</form>
Result
