Magento 2 form field toggled type

Question

I want to create a toggle input option in magento 2 like this:

but i don't know what type of field is that, right now i'm using select dropdown like this:

$fieldset->addField(
            'featured',
            'select',
            [
                'label' => __('Featured'),
                'title' => __('Featured'),
                'required' => true,
                'options' => ['1' => __('Yes'), '0' => __('No')],
                'value' => $partner['featured']
            ]
        );

Answer 1

This is checkbox form field. Which is included in UI Component library. You cannot use this toggle in $fieldset->addField(). You need to create a form with UI component to create this type of toggle.

<field name="status">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataType" xsi:type="string">boolean</item>
            <item name="formElement" xsi:type="string">checkbox</item>
            <item name="source" xsi:type="string">category</item>
            <item name="prefer" xsi:type="string">toggle</item>
            <item name="label" xsi:type="string" translate="true">Status</item>
            <item name="valueMap" xsi:type="array">
                <item name="true" xsi:type="string">1</item>
                <item name="false" xsi:type="string">0</item>
            </item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
            <item name="default" xsi:type="string">1</item>
        </item>
    </argument>
</field>

Answer 2

Below solution is working for me. Hope it will help someone.

$fieldset->addField(
    'my_field',
    'checkbox',
    [
        'name' => 'my_field',
        'class' => 'admin__actions-switch-checkbox',
        'label' => __('My field label'),
        'value' => $model->getData('my_field'),
        'checked' => $model->getData('my_field'),
        'after_element_js' => '
            <label class="admin__actions-switch-label" for="my_field">
                <span class="admin__actions-switch-text" data-text-on="'.__('Yes').'" data-text-off="'.__('No').'"></span>
            </label>
            <script type="text/javascript">
                require(["jquery"], function($){
                    $("#my_field").change(function() {
                        if($("#my_field").is(":checked")) {
                            $("#my_field").val("1");
                        } else {
                            $("#my_field").val("0");
                        }
                    });

                    $("#edit_form").submit(function() {
                        $("#my_field").prop("checked", true);
                    });
                });
            </script>
        '
    ]
);

Answer 3

While I recommend using the Ui component method. You can use the following (slightly roundabout) way to add a toggle checkbox if you only have addField at your disposal.

$fieldset->addField(
    'my_field',
    'checkbox',
    [
        'label' => __('My field label'), 
        'required' => false, 
        'value' => '1', 
        'name' => 'my_field', 
        'class' => 'admin__actions-switch-checkbox', 
        'after_element_js' => '
            <label class="admin__actions-switch-label" for="my_field">
                <span class="admin__actions-switch-text" data-text-on="'.__('Yes').'" data-text-off="'.__('No').'"></span>
            </label>
        '
    ]
);

Answer 4

Just came across the same situation. We can use the onchange handler for toggle instead of writing custom Jquery script.

$fieldset->addField(
            'featured',
            'checkbox',
            [
                'label' => __('Featured'),
                'title' => __('Featured'),
                'name' => 'featured',
                'data-form-part' => $this->getData('target_form'),
                'onchange' => 'this.value = this.checked;',
                'checked' => $partner['featured'],
                'class' => 'admin__actions-switch-checkbox',
                'after_element_js' => '
                    <label class="admin__actions-switch-label" for="customer_form_featured">
                        <span class="admin__actions-switch-text" data-text-on="'.__('Yes').'" data-text-off="'.__('No').'">
                        </span>
                    </label>
                '
            ]
        );

Answer 5

Use below Checkbox component code for Magento 2.2.0 and later version, because old structure will be deprecated at some point.

   <field name="status" sortOrder="10" formElement="checkbox">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">yoursourcegoes here</item>
                <item name="default" xsi:type="number">1</item>
            </item>
        </argument>
        <settings>
            <dataType>boolean</dataType>
            <label translate="true">Status</label>
            <dataScope>status</dataScope>
        </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>