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:

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

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 name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            <item name="default" xsi:type="string">1</item>
  • 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 – Prince Patel 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

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.

        '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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.