Magento-2 How to create a Radio button field in Admin Configuration

Hello everyone, today we are going to learn, how to create a radio button field in the admin system configuration.

In Magento, System Configurations are the settings provided by the modules/extensions through which the store owner(Admin) can make certain changes in the module's functionality according to his needs.

It is very important to make configurations simple and easy to use and for that, the right choice of field type plays a major role.

Let's create a radio button field by following some simple steps.

Steps to create a radio button:-

1. Create the system.xml file.
2. Create a field of type radios.
3. Add a source model.
4. Create a source model file.
5. Flush Magento cache.

Let's go through each of these steps one by one.

Step 1: Create the system.xml file

The system.xml is a configuration file that is used to create configuration fields in Admin System Configuration.

let's create a system.xml for our simple module whose vendor name is MyVendor and module name is MyModule. The system.xml file is located in the etc/adminhtml folder of the module.

app/code/MyVendor/MyModule/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>
        <tab id="myvendor" translate="label" sortOrder="100">
            <label>MyVendor</label>
        </tab>
        <section id="mymodule" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>MyModule</label>
            <tab>myvendor</tab>
            <resource>MyVendor_MyModule::config_mymodule</resource>
            <group id="general" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Setting</label>
                ---------------- ----------------
                ------------ ------- ------------
            </group>
        </section>
    </system>
</config>

Step 2: Create a field of type radios

In order to create a radio button, we will add a field tag of type radios in the group tag

<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>
        ------- ------- -------
        ------ ------ ---------
    </field>
</group>

Please note that the type of field is radios, not radio.

Step 3: Add a source model

A Source Model is used to insert values into certain fields like dropdowns, checkboxes, multi-selects, and radios in the system configuration. So not all fields can have a Source Model.

<field id="enable" translate="label" type="radios" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
    <label>Module</label>
    <source_model>MyVendor\MyModule\Model\Config\Source\RadioButton</source_model>
</field>

Step 4: Create a source model file

By default, In Magento 2 there are several Source Models that we can use but also we can create our custom one, and here we will create a custom source model. Let's do it!

app/code/MyVendor/MyModule/Model/Config/Source/RadioButton.php

<?php

namespace MyVendor\MyModule\Model\Config\Source;

class RadioButton implements \Magento\Framework\Data\OptionSourceInterface
{

    /**
     * To option array
     */
    public function toOptionArray()
    {
        return [
            ['value' => 1, 'label' => __('Enable')],
            ['value' => 0, 'label' => __('Disable')]
        ];
    }
}

Here toOptionArray method is provided by the Interface Magento\Framework\Data\OptionSourceInterface, which we are using and declaring the method body. So when Magento calls the toOptionArray method, as an implemented class of OptionSourceInterface our class toOptionArray method will be executed and it will return our provided value and label to the field.

Step 5: Flush Magento cache

Now all the required files are created, all that is remain is to run the command php bin/magento cache:flush and we are good to see the result.

After running the command we will see the radio buttons something like this.

That's all for this article. Let me know if this was helpful. Thank you for your time. Take care and stay healthy.