Read More
Read More
Menu Close

    Magento 2:- How to Create Radio button in Admin System Configuration

    Hello guys!!

    In this article, we will learn how to create a radio button in admin Configuration.
    Magento does provide the type to create a radio type field but if you use it, it will only show a single radio button without any title or value to save, So it requires a little custom task to make it look understandable and working.

    Let’s do it!!

    First, we will create a system.xml

    app/code/Webkul/Demo/etc/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>
            <tab id="webkul" translate="label" sortOrder="100">
                <label>Webkul</label>
            </tab>
            <section id="demo" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Demo</label>
                <tab>webkul</tab>
                <resource>Webkul_Demo::config_demo</resource>
                <group id="general" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>General Setting</label>
                    <field id="enable" translate="label" type="radios" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
                        <label>Module</label>
                        <source_model>Webkul\Demo\Model\Config\Source\Radio</source_model>
                    </field>
                </group>
            </section>
        </system>
    </config>

    Note:- Field type is radios, not radio

    Start your headless eCommerce
    now.
    Read More

    Let’s create our custom source model.

    app/code/Webkul/Demo/Model/Config/Source/Radio

    <?php
    
    namespace Webkul\Demo\Model\Config\Source;
    
    class Radio implements \Magento\Framework\Data\OptionSourceInterface
    {
    
        /**
         * To option array
         */
        public function toOptionArray()
        {
            return [
                ['value' => 1, 'label' => __('Enable')],
                ['value' => 0, 'label' => __('Disable')]
            ];
        }
    }

    That’s all for this article. Let me know if this was helpful. Thank you for your time.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top