how we create a Checkbox form fields in uicomponent in Magento

 

Hi Magento friend today's im share how we create a Checkbox form fields in uicomponent in Magento

1) Integrate the Checkbox component configured as toggle element in uicomponent Form  - 

<form>

    <fieldset>

        <field name="myCheckbox" formElement="checkbox">

            <settings>

                <label translate="true">Enabled</label>

                <tooltip>

                    <description translate="true">This is my checkbox's description</description>

                </tooltip>

            </settings>

            <formElements>

                <checkbox>

                    <settings>

                        <prefer>toggle</prefer>

                        <valueMap>

                            <map name="false" xsi:type="boolean">false</map>

                            <map name="true" xsi:type="boolean">true</map>

                        </valueMap>

                    </settings>

                </checkbox>

            </formElements>

        </field>

    </fieldset>

</form>

2) Integrate the Checkbox component configured as checkbox element in uicomponent Form  -

<form>

    <fieldset>

        <field name="myCheckbox" formElement="checkbox">

            <settings>

                <label translate="true">Checkbox</label>

                <tooltip>

                    <description translate="true">This is my checkbox's description</description>

                </tooltip>

            </settings>

            <formElements>

                <checkbox>

                    <settings>

                        <prefer>checkbox</prefer>

                        <valueMap>

                            <map name="false" xsi:type="boolean">false</map>

                            <map name="true" xsi:type="boolean">true</map>

                        </valueMap>

                    </settings>

                </checkbox>

            </formElements>

        </field>

    </fieldset>

</form>

 3) Integrate the Checkbox component configured a radio element in uicomponent Form  - 

<form>

    <fieldset>

        <field name="myRadio" formElement="checkbox">

            <settings>

                <label translate="true">Radio</label>

                <tooltip>

                    <description translate="true">This is my radio's description</description>

                </tooltip>

            </settings>

            <formElements>

                <checkbox>

                    <settings>

                        <prefer>radio</prefer>

                        <valueMap>

                            <map name="false" xsi:type="boolean">false</map>

                            <map name="true" xsi:type="boolean">true</map>

                        </valueMap>

                    </settings>

                </checkbox>

            </formElements>

        </field>

    </fieldset>

</form>