9

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

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>
3
  • 1
    Hi, Can you show or share link for Js component for this toggle checkbox that hides fields on on/off
    – Ajwad Syed
    Apr 30 '19 at 12:14
  • @AjwadTaqvi Check this components Magento_Catalog/js/components/visible-on-option/yesno May 1 '19 at 5:31
  • Hi Prince. Your answer is pretty good. I am using it to add a new field in the custom option value section. I can create the toggle switch with the help of your code and save the value in the database. But the problem is that the toggle not selected by default according to a database value. Is there anything I need to do for that? Like, add a script code etc?
    – Indian
    Jun 28 '19 at 10:22
2

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>
        '
    ]
);
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>
        '
    ]
);
1
  • Thank you so much @Nalin Savaliya it is working for me. thanks a lot Mar 12 at 10:49

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .