Magento2: Create toggle button yes/no in admin product page

Question

I want to create a toggle button yes/no in the product or category admin side page. also eager to know its description of flow and binding process. I followed many tutorials but don't get the exact solution that I need. like the below images.

Answer 1

For this 1. You will have to create new product attribute

Admin >> Stores >> Attributes >> Product >> Add Attributes

2. Select "Yes/No" in Catalog Input Type for Store Owner
3. Fill all your information and save that attribute.
4. Got to Admin >> Stores >> Attributes >> Attribute Set and assign that attribute to your attribute set.
5. Clear cache .

After all these steps this attribute will show on your product page

Answer 2

First Create Attribute for Category and then add below code in category_form.xml

    <field name="your-attribute-code" sortOrder="335" formElement="checkbox">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">category</item>
                <item name="default" xsi:type="number">0</item>
            </item>
        </argument>
        <settings>
            <validation>
                <rule name="required-entry" xsi:type="boolean">false</rule>
            </validation>
            <dataType>boolean</dataType>
            <label translate="true">your-attribute-label</label>
        </settings>
        <formElements>
            <checkbox>
                <settings>
                    <valueMap>
                        <map name="false" xsi:type="string">0</map>
                        <map name="true" xsi:type="string">1</map>
                    </valueMap>
                    <prefer>toggle</prefer>
                </settings>
            </checkbox>
        </formElements>
    </field>

Answer 3

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>

that above images picture i want to change into toggle yes/no button. like below images.