---
title: "Magento 2 Add UI-select Component with Search Filter in Admin Form"
url: "https://dolphinwebsolution.com/magento-2-add-ui-select-component-with-search-filter-in-admin-form"
date: "2021-10-13T05:56:09+05:30"
modified: "2023-08-25T09:27:32+05:30"
author:
  name: "Jigar Patel"
categories:
  - "Magento"
word_count: 605
reading_time: "4 min read"
summary: "In this article, Today I will instruct on How to Add UI-select component with search filter in admin form Magento 2.

Using the below codes, you can Add An UI-select In Your Ui-Form With A Search..."
description: "In this article, Today I will instruct on How to Add UI-select component with search filter in admin form Magento 2. Using the codes, you can Add An UI-selec..."
keywords: "Add UI-select component with search,Add UI-select component with search in magento 2,magento 2 Add UI-select component with search,Add UI-select component with search in  magento,Component with Search Filter in Admin Form,Component with Search Filter in Admin Form magento 2,magento 2 Component with Search Filter in Admin Form, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "11 Common Online Shopping Problems Faced by Customers and How to Solve it"
    url: "https://dolphinwebsolution.com/blog/common-online-shopping-problems/"
  - title: "How to create custom page layout in Magento 2."
    url: "https://dolphinwebsolution.com/how-to-create-custom-page-layout-in-magento"
  - title: "How to Add Custom Tab in Product Page Magento 2"
    url: "https://dolphinwebsolution.com/how-to-add-custom-tab-in-product-page-magento-2"
---

# Magento 2 Add UI-select Component with Search Filter in Admin Form

_Published: October 13, 2021_  
_Author: Jigar Patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/Add-UI-select-Component-with-Search-Filter-in-Magento-2-1024x536.png)

> In this article, Today I will instruct on How to Add UI-select component with search filter in admin form Magento 2. Using the below codes, you can Add An UI-select In Your Ui-Form With A Search Filter In Magento 2. Step:1 First We will start with the field in your ui-form:

In this article, Today I will instruct on How to **Add UI-select component with search filter in admin form** Magento 2.

Using the below codes, you can **Add An UI-select In Your Ui-Form With A Search Filter** In Magento 2.

#### Step:1 First We will start with the field in your ui-form:
```
<field name="color" component="Dolphin_Customoptionextend/js/components/select-color" sortOrder="20"
               formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="showCheckbox" xsi:type="boolean">true</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                </item>
            </argument>
            <settings>
                <required>true</required>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
                <label translate="true">Select Color</label>
                <dataScope>data.color</dataScope>
                <componentType>field</componentType>
                                    setParsed                            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Dolphin\Customoptionextend\Ui\Component\Form\Color\Options"/>
                    </settings>
                </select>
            </formElements>
        </field>
```

- **component**: The path to the component’s .js file in terms of RequireJS.\[dt\_highlight color=”” text\_color=”” bg\_color=””\](Dolphin\_Customoptionextend/js/components/select-color)\[/dt\_highlight\]
- **elementTmpl**: The path to the .html template of the particular type of field (select).(ui/grid/filters/elements/ui-select)
- **template**: The path to the general field[ .html template](https://magento.stackexchange.com/questions/98456/magento-2-html-file-and-phtml-file-in-custom-template-process).
- **options**: The array of the options to be displayed in the list for selection. \[dt\_highlight color=”” text\_color=”” bg\_color=””\](Dolphin\\Customoptionextend\\Ui\\Component\\Form\\Color\\Options)\[/dt\_highlight\]

Also like to Read: [How to create UI Form and UI Grid in Magento 2](https://dolphinwebsolution.com/how-to-create-ui-form-and-ui-grid-in-magento-2)?

#### Step:2 Now create component (Js) file to map the field’s value:
File: app/code/Dolphin/Customoptionextend/view/adminhtml/web/js/components/select-color.js

```
define([
    'Magento_Ui/js/form/element/ui-select'
], function (Select) {
    'use strict';
    return Select.extend({
        /**
         * Parse data and set it to options.
         *
         * @param {Object} data - Response data object.
         * @returns {Object}
         */
        setParsed: function (data) {
            var option = this.parseData(data);
            if (data.error) {
                return this;
            }
            this.options([]);
            this.setOption(option);
            this.set('newOption', option);
        },
        /**
         * Normalize option object.
         *
         * @param {Object} data - Option object.
         * @returns {Object}
         */
        parseData: function (data) {
            return {
                value: data.color.id,
                label: data.color.name
            };
        }
    });
});
```

#### Step:3 Now create a file to get options(return array) to display in select:
File: app/code/Dolphin/Customoptionextend/Ui/Component/Form/Color/Options.php

```
<?php

namespace Dolphin\Customoptionextend\Ui\Component\Form\Color;

use Magento\Framework\App\RequestInterface;
use Magento\Framework\Data\OptionSourceInterface;
use \Magento\Eav\Model\Config;

class Options implements OptionSourceInterface
{
    /**
     * @var RequestInterface
     */
    protected $request;

    /**
     * @var Config
     */
    protected $_eavConfig;

    /**
     * @param Config $eavConfig
     * @param RequestInterface $request
     */
    public function __construct(
        Config           $eavConfig,
        RequestInterface $request
    )
    {
        $this->_eavConfig = $eavConfig;
        $this->request = $request;
    }

    /**
     * {@inheritdoc}
     */
    public function toOptionArray()
    {
        $coloOptions = $this->getColorOption();
        return $coloOptions;
    }

    protected function getColorOption()
    {
        $attribute = $this->_eavConfig->getAttribute('catalog_product', 'color');//color is a product attribute
        $options = $attribute->getSource()->getAllOptions();
        return $options;
    }

}
```

Like to Read: [Product Labels for Magento 2](https://dolphinwebsolution.com/shop/product-labels-for-magento.html)

**Result:**

![AI Integration in Magento: Benefits, Use Cases and Business Impact](https://dolphinwebsolution.com/wp-content/uploads/2021/10/color-option.png)

I Hope, This instruction will be helpful for you.

If you have any difficulties regarding this blog, do consider them posting in the Comments section below!

I’m here to help.

**Thank you!**


---

_View the original post at: [https://dolphinwebsolution.com/magento-2-add-ui-select-component-with-search-filter-in-admin-form](https://dolphinwebsolution.com/magento-2-add-ui-select-component-with-search-filter-in-admin-form)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:54:30 UTC_