The system.xml file in Magento 2 defines configuration settings for your module that will appear in the Magento Admin panel. These settings can be organised into sections, groups, and fields. Below is an example of a detailed system.xml file, including various types of fields and how they can be organised.

1. Create system.xml

Create a system.xml file in app/code/Vendor/Module/etc/adminhtml:
  
<?xml version="1.0"?>
<!--
/**
 * Copyright © Magekwik (support@magekwik.com). All rights reserved.
 * Please visit Magekwik.com for license details (https://magekwik.com/end-user-license-agreement).
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        
        <!-- Define a new section -->
        <section id="magekwik_settings" translate="label" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Magekwik Extension</label>
            <tab>magekwik</tab> <!-- Custom tab for grouping sections -->
            <resource>Vendor_Module::store_config</resource>

            <!-- Define a group inside the section -->
            <group id="general_settings" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <comment>Basic settings for Magekwik module</comment>

                <!-- Define fields inside the group -->
                <field id="enabled" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Module</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <backend_model>Magento\Config\Model\Config\Backend\Enabled</backend_model>
                    <comment>Enable or disable the Magekwik module.</comment>
                </field>

                <field id="text_field" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sample Text Field</label>
                    <backend_model>Magekwik\Config\Model\Backend\Text</backend_model>
                    <comment>This is a sample text field for configuration.</comment>
                </field>

                <field id="select_field" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sample Select Field</label>
                    <source_model>Magekwik\Config\Model\Config\Source\Options</source_model>
                    <comment>This is a sample select field for configuration.</comment>
                </field>

                <field id="multiselect_field" translate="label" type="multiselect" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sample Multi-select Field</label>
                    <source_model>Magekwik\Config\Model\Config\Source\MultiOptions</source_model>
                    <comment>Select multiple options.</comment>
                </field>

                <field id="textarea_field" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sample Textarea Field</label>
                    <backend_model>Magekwik\Config\Model\Backend\Textarea</backend_model>
                    <comment>Enter detailed information here.</comment>
                </field>

                <field id="date_field" translate="label" type="date" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sample Date Field</label>
                    <comment>Select a date.</comment>
                </field>

                <field id="image_field" translate="label" type="image" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sample Image Upload Field</label>
                    <backend_model>Magekwik\Config\Model\Backend\Image</backend_model>
                    <comment>Upload an image for the configuration.</comment>
                </field>
            </group>

            <!-- Another group can be added for additional settings -->
            <group id="advanced_settings" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Advanced Settings</label>
                <comment>Advanced settings for Magekwik module</comment>

                <field id="cron_expression" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Cron Expression</label>
                    <comment>Define the cron schedule (e.g., * * * * *)</comment>
                    <validate>cron</validate>
                </field>

                <field id="developer_mode" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Developer Mode</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>Enable or disable developer mode.</comment>
                </field>
            </group>
        </section>
    </system>
</config>

Explanation:

  1. Section: The <section> element creates a new section in the Magento Admin panel. In this example, it's labeled "Magekwik Settings" and is part of the custom tab magekwik.
  2. Group: Within a section, groups are used to organize related fields. The example has "General Settings" and "Advanced Settings" groups.
  3. Field Types:
    • text: A simple text input.
    • select: A dropdown selection input.
    • multiselect: Allows multiple selections.
    • textarea: A larger text area for multi-line input.
    • date: A date picker.
    • image: An image upload field.
  4. Custom Models: Fields can be linked to custom models for backend processing (backend_model) or to provide options (source_model).
  5. Validation: Validation can be added using the <validate> tag, as shown in the cron_expression field.
This structure helps create a robust and user-friendly configuration section for your Magento 2 module, offering flexibility and ease of use for the admin users.