Question

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

enter image description here

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']
            ]
        );
Was it helpful?

Solution

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>

OTHER TIPS

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>
        '
    ]
);

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>
        '
    ]
);
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top