Back to Top

Add UI-Select with Search Filter on Admin form in Magento 2

Updated 19 February 2024

If in your application you want to add an ui-select in your ui-form with a search filter, then you can use following process:

First you need to a field in your ui-form:

<field name="customer" component="Webkul_Test/js/components/select-customer" sortOrder="20" formElement="select">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filterOptions" xsi:type="boolean">true</item>//to add filter in select-ui
            <item name="multiple" xsi:type="boolean">false</item>//select multiple or not
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <rule name="required-entry" xsi:type="boolean">true</rule>
        <label translate="true">Select Customer</label>//label to Field
        <dataScope>data.customer</dataScope>//To map
            <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
                <options class="Webkul\Test\Ui\Component\Create\Form\Customer\Options"/>

Now create Js file to map the fields value:


], 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.set('newOption', option);
         * Normalize option object.
         * @param {Object} data - Option object.
         * @returns {Object}
        parseData: function (data) {
            return {
                value: data.customer.entity_id,

Now create file to get options to display in select:

Searching for an experienced
Magento 2 Company ?
Find out More


namespace Webkul\Test\Ui\Component\Create\Form\Customer;

use Magento\Framework\Data\OptionSourceInterface;
use Magento\Customer\Model\ResourceModel\Customer\CollectionFactory as CustomerCollectionFactory;
use Magento\Framework\App\RequestInterface;

 * Options tree for "Categories" field
class Options implements OptionSourceInterface
     * @var \Magento\Customer\Model\ResourceModel\Customer\CollectionFactory
    protected $customerCollectionFactory;

     * @var RequestInterface
    protected $request;

     * @var array
    protected $customerTree;

     * @param CustomerCollectionFactory $customerCollectionFactory
     * @param RequestInterface $request
    public function __construct(
        CustomerCollectionFactory $customerCollectionFactory,
        RequestInterface $request
    ) {
        $this->customerCollectionFactory = $customerCollectionFactory;
        $this->request = $request;

     * {@inheritdoc}
    public function toOptionArray()
        return $this->getCustomerTree();

     * Retrieve categories tree
     * @return array
    protected function getCustomerTree()
        if ($this->customerTree === null) {
            $collection = $this->customerCollectionFactory->create();


            foreach ($collection as $customer) {
                $customerId = $customer->getEntityId();
                if (!isset($customerById[$customerId])) {
                    $customerById[$customerId] = [
                        'value' => $customerId
                $customerById[$customerId]['label'] = $customer->getName();
            $this->customerTree = $customerById;
        return $this->customerTree;

After this a select-ui with search filter will be displayed on your form.

Hope, this will help you to implement your functionality.

I hope this blog will help you with Add UI-Select with Search Filter on Admin form in Magento 2. You may also check our wide range of best Magento 2 Extensions.

Please reach out to our team via a support ticket if you have any queries.

Try this and if you have any queries then just comment below ­čÖé

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • Giurti
    • abhishek (Moderator)
    • Nitish Kumar Upadhyay (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home