Meet Us at Dubai - Gitex Global 2023 For The Exponential Growth Of Your Business!! Schedule a Meeting.

Add Custom Select Options Attribute in Category Form Magento 2

Written by Mahesh Makwana

Aug 08, 2021

Add Custom Select Options Attribute in Category Form Magento 2

We learn how to create custom category attributes using InstallData.php in Magento 2. When we develop modules or themes we need some custom attributes in category form for some requirements. We can add different type of category attribute like toggle, select, text, WYSIWYG editor, etc. type files in Category form.

We used the InstallData.php file for creating custom category attributes. InstallData.php file places at your module path app/code/VendoreName/ModuleName/Setup/InstallData.php. This file executes only once when our module is installing the first time. After the module is successfully installed InstallData.php file does not execute. It means the InstallData.php file only executes once while the module first time installed.

If you don’t want to code Than you MUST try our Extension Product custom option template.

product custom option templet extension

Here, we creating one Custom Select Option input in Category Form

Step-1: Create registration.php

Create registration.php at app/code/Dolphin/CategoryAttribute


Step-2: Create module.xml

Create module.xml at app/code/Dolphin/CategoryAttribute/etc

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Dolphin_CategoryAttribute" setup_version="1.0.0">
            <module name="Magento_Catalog"/>
            <module name="Magento_Backend"/>

Step-3: Create InstallData.php

Create InstallData.php at app/code/Dolphin/CategoryAttribute/Setup

namespace Dolphin\CategoryAttribute\Setup;
use Magento\Eav\Model\Entity\Attribute\Source\Boolean;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
class InstallData implements InstallDataInterface
    private $eavSetupFactory;
    public function __construct(EavSetupFactory $eavSetupFactory)
        $this->eavSetupFactory = $eavSetupFactory;
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        /* Remove Category Attribute */
        $eavSetup->removeAttribute(\Magento\Catalog\Model\Category::ENTITY, 'custom_select_options');
        /* Add Category Attribute */
                'type' => 'varchar',
                'label' => 'Custom Select Options',
                'input' => 'multiselect',
                'visible' => true,
                'required' => false,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'backend' => 'Magento\Eav\Model\Entity\Attribute\Backend\ArrayBackend',
                'group' => 'General Information',

Step-4: Create CustomOptionList.php

Create CustomOptionList.php at app/code/Dolphin/CategoryAttribute/Model/Config/Source


namespace Dolphin\CategoryAttribute\Model\Config\Source;

use Magento\Eav\Model\Entity\Attribute\Source\AbstractSource;

class CustomOptionList extends AbstractSource

    public function getOptionArray()
        $options = [];
        $options[0] = (__('Option 1'));
        $options[1] = (__('Option 2'));
        $options[2] = (__('Option 3'));
        return $options;

    public function getAllOptions()
        $res = $this->getOptions();
        array_unshift($res, ['value' => '', 'label' => '']);
        return $res;

    public function getOptions()
        $res = [];
        foreach ($this->getOptionArray() as $index => $value) {
            $res[] = ['value' => $index, 'label' => $value];
        return $res;

    public function toOptionArray()
        return $this->getOptions();

Step-5: Create category_form.xml

Create category_form.xml at app/code/Dolphin/CategoryAttribute/view/adminhtml/ui_component

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi=""
    <fieldset name="general">
        <field name="custom_select_options">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Dolphin\CategoryAttribute\Model\Config\Source\CustomOptionList</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Custom Option</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">custom_select_options</item>
                    <item name="dataScope" xsi:type="string">custom_select_options</item>
                    <item name="sortOrder" xsi:type="number">20</item>

After creating and updating the above files run Magento commands:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

Now you show the below output:

Custom Select Options

Sometimes we have so many options in our select input then scrolling is difficult for the user. So now we add search select input by using the below code.

Update category_form.xml at app/code/Dolphin/CategoryAttribute/view/adminhtml/ui_component

<field name="custom_toggle">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Dolphin\CategoryAttribute\Model\Config\Source\CustomOptionList</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string">Custom Select</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
            <item name="formElement" xsi:type="string">multiselect</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
             <item name="multiple" xsi:type="boolean">false</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="sortOrder" xsi:type="number">30</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            <item name="config" xsi:type="array">
                <item name="dataScope" xsi:type="string">custom_toggle</item>

After updating the above files run php bin/magento cache:clean  Magento command.

Now you show the below output:

category single select


If you want to use multi select input just comment <item name=”multiple”  xsi:type=”boolean”>false</item> or replace false to true in above code. After updating the files run php bin/magento cache:clean  Magento command.

category multi select

You also like to read this:

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.

Mahesh Makwana


We can help you with

  • Dedicated Team
  • Setup Extended Team
  • Product Development
  • Custom App Development

Schedule a Developer Interview And Get 7 Days Risk-Free Trial

Fill out This Form and one of Our Technical Experts will Contact you Within 12 Hours.

    Copyright © 2023 DOLPHIN WEB SOLUTION. All rights reserved.

    TO TOP