Magento2: how to create Toggle button yes/no in admin side

Question

here I created a new payment method and want to change the current dropdown option into toggle yes/no button. please check the below code and images. Packt/Shipme/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="carriers"><group id="shipme" translate="label" type="text" sortOrder="50"
                                      showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Shipme</label>
            <field id="active" translate="label" type="select"
                   sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
                <label>Enabled</label>
                <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
            </field>
            <field id="name" translate="label" type="text" sortOrder="20"
                   showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Method Name</label>
            </field>
            <field id="title" translate="label" type="text" sortOrder="20"
                   showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Method Title</label>
            </field>
            <field id="express_enabled" translate="label" type="select"
                   sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="0"><label>Enable express</label>
                <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
            </field>
            <field id="express_title" translate="label" type="text"
                   sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Title express</label>
            </field>
            <field id="express_price" translate="label" type="text"
                   sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Price express</label>
            </field>
            <field id="business_enabled" translate="label" type="select"
                   sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="0">
                <label>Enable business</label>
                <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
            </field>
            <field id="business_title" translate="label" type="text"
                   sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Title business</label>
            </field>
            <field id="business_price" translate="label" type="text"
                   sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Price business</label>
            </field>
            <field id="specificerrmsg" translate="label" type="textarea"
                   sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Displayed Error Message</label>
            </field>
            <field id="sallowspecific" translate="label" type="select"
                sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="0">
                <label>Ship to Applicable Countries</label>
                <frontend_class>shipping-applicable-country</frontend_class>
                <source_model>Magento\Shipping\Model\Config\Source\Allspecificcountries</source_model>
            </field>
            <field id="specificcountry" translate="label" type="multiselect"
                sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>Ship to Specific Countries</label>
                <source_model>Magento\Directory\Model\Config\Source\Country</source_model>
                <can_be_empty>1</can_be_empty>
            </field>
        </group>
        </section>
    </system>
</config>

But I need toggle button like below images.

can you guys please guide how can grab it.

Packt/Shipme/Block/Adminhtml/System/Config/Advanced.php

<?php

namespace Packt\Shipme\Block\Adminhtml\System\Config;

class Advanced extends \Magento\Config\Block\System\Config\Form\Field
{
/**
 * Template path
 *
 * @var string
 */
protected $_template = 'system/config/advance/check.phtml';

/**
 * Render fieldset html
 *
 * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
 * @return string
 */
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
    $columns = $this->getRequest()->getParam('website') || $this->getRequest()->getParam('store') ? 5 : 4;
    return $this->_decorateRowHtml($element, "<td class='label'>Enable Shipme</td><td>" . $this->toHtml() . '</td><td></td>');
}
}

Answer 1

Try below code:

Modify your block file like this:

<?php

namespace MyModule\CustomModule\Block\Adminhtml\System\Config;

class Advanced extends \Magento\Config\Block\System\Config\Form\Field
{
    const CONFIG_PATH = 'section/group/field'; // your checkbox

    /**
     * Template path
     *
     * @var string
     */
    protected $_template = 'system/config/advance/check.phtml';
    protected $_values = null;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Config\Model\Config\Structure $configStructure
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * Retrieve element HTML markup.
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     *
     * @return string
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $this->setNamePrefix($element->getName())
            ->setHtmlId($element->getHtmlId());

        return $this->_toHtml();
    }

    public function getValues()
    {
        $values = [];
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();

        foreach ($objectManager->create('MyModule\CustomModule\Model\Config\Source\Checkbox')->toOptionArray() as $value) {
            $values[$value['value']] = $value['label'];
        }

        return $values;
    }

    /**
     *
     * @param  $name
     * @return boolean
     */
    public function getIsChecked($name)
    {
        return in_array($name, $this->getCheckedValues());
    }

    /**
     *
     *get the checked value from config
     */
    public function getCheckedValues()
    {
        if (is_null($this->_values)) {
            $data = $this->getConfigData();
            if (isset($data[self::CONFIG_PATH])) {
                $data = $data[self::CONFIG_PATH];
            } else {
                $data = '';
            }
            $this->_values = explode(',', $data);
        }

        return $this->_values;
    }

}

Add your checkbox source from: MyModule\CustomModule\Model\Config\Source\Checkbox.php

<?php

namespace MyModule\CustomModule\Model\Config\Source;

class Checkbox implements \Magento\Framework\Option\ArrayInterface
{

/**
 * Options getter
 *
 * @return array
 *
 */
public function toOptionArray()
{
    return [['value' => 'My custom value', 'label'=>__('My custom Label')]];
}
}