Adobe Commerce 2.3 reached end of support in September 2022.

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

CheckboxToggleNotice with Selected Option #1 Component Example CheckboxToggleNotice with Selected Option #2 Component Example