How to create checkbox field in system configuration Magento 2

Here we learn, how to create checkbox field in system configuration Magento 2.

1. Create a field in system.xml (Webkul/DemoModule/etc/adminhtml/system.xml)

<field id="checkbox" translate="label" sortOrder="350" showInDefault="1" showInWebsite="1" showInStore="0">
   <label>Checkbox</label>
   <frontend_model>Webkul\DemoModule\Block\System\Config\Checkbox</frontend_model>
</field>

2. Now create Frontend Model file Checkbox.php (Webkul/DemoModule/Block/System/Config/Checkbox.php)

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_DemoModule
 * @author    Webkul
 * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\DemoModule\Block\System\Config;

class Checkbox extends \Magento\Config\Block\System\Config\Form\Field
{
    const CONFIG_PATH = 'demomodule/group_id/checkbox';

    protected $_template = 'Webkul_DemoModule::system/config/checkbox.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('Webkul\DemoModule\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;
    }
}

3. Create Webkul/DemoModule/Model/Config/Source/Checkbox.php

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_DemoModule
 * @author    Webkul
 * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\DemoModule\Model\Config\Source;

/**
 * Used in creating options for getting product type value
 *
 */
class Checkbox
{
    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        return [['value' => 'checkbox', 'label'=>__('Checkbox')]];
    }
}

4. Finally Create template file(Webkul/DemoModule/view/adminhtml/templates/system/config/checkbox.phtml) which we have defined in Webkul/DemoModule/Block/System/Config/Checkbox.php File

<input type="hidden" name="<?php echo $block->getNamePrefix() ?>" value="" /><!-- this is send if nothing is checked -->
<ul class="checkboxes">
    <?php foreach ($block->getValues() as $name => $label): ?>
        <li>
            <input type="checkbox" value="<?php echo $name?>" name="<?php echo $block->getNamePrefix() ?>[]"
                    id="<?php echo $block->getHtmlId() . '_' . $name ?>"
                    <?php echo ($block->getIsChecked($name) ? ' checked="checked"' : '') ?>/>
            <label for="<?php echo $block->getHtmlId() . '_' . $name ?>">
                <?php echo $label ?>
            </label>
        </li>
    <?php endforeach;?>
</ul>