Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-marketplace-mod

    Magento2 Create Multi Select UI Field on Frontend as Admin

    How to Create Multi Select UI Field on Frontend as Admin

    Here we learn how to add or create Multi select field using the Ui Component on frontend.
    I am going to take an example of categories multi select files which looks like the below
    image in admin->catalog New or Edit Product section.

    Let’s start step by step.
    You must have installed your custom Module on which you are going to implement this.

    1.) Create a xml file which loads your Block and Phtml file.

    For Example: custom_test_index.xml


    2.) Now Create the respective Block and .phtml template.
    Webkul\Custom\Block\Test.php


    In above Block file getCategoriesTree() Method loads the all Categories in array form. Its just
    an example, you can pass your custom array to display in the field.

    3.) Create the phtml template file.
    Webkul/Custom/view/frontend/templates/test.phtml


    In above template file, we have instantiated ui-select.js compoenent and its default values.
    You can customize this ui-select fiels according to your choice. Like you can disable multiple, showCheckbox etc.

    For more default options of ui-select you can view this file:
    Magento_Ui/js/form/element/ui-select.js

    For Now let’s create the ui-select.html template which we have used in customCategory component.
    Webkul/Smtp/view/frontend/web/template/ui-select.html


    Now Flush the Cache, and see the result like below image.

    Note: Please get the CSS from Admin for this filed, otherwise it will not looks as Admin.

    Thanks.

    . . .

    Comments (6)

    Add Your Comment

  • Rav
    Hi Mahesh

    Any idea how the value of this field will be submitter on form submit? Because there is no input field which can pass the selected category ids

    • Mahesh Singh
      Hi Rav, check this line of code in test.html <input type="hidden" name="category_id" you can see
      there is foreach iteration to assign the selected values in this hidden field (You might need do some changes), foreach: { data: getSelected(), as: 'option'}.
  • vishal
    can you share full detail from base level
  • Vikas mehar
    Can you please mention the css path?
    • Mahesh Singh
      Vikas, there is no specific css file for this field, you can manage the style
      by own or you can copy the css code by inspecting the admin product edit page.
      • Vikas mehar
        Thanks Mahesh,

        This blog is really helpful.

  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close