# Modifying the Search UI Layout

**URL:** <https://discuss.elastic.co/t/modifying-the-search-ui-layout/245739>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [August 20, 2020, 9:54am UTC](https://discuss.elastic.co/t/modifying-the-search-ui-layout/245739 "2020-08-20T09:54:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![spadel](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@spadel](https://discuss.elastic.co/u/spadel)\
**Post date:** [August 20, 2020, 9:54am UTC](https://discuss.elastic.co/t/modifying-the-search-ui-layout/245739/1 "2020-08-20T09:54:12Z")

</div>

I have built a search engine that looks like follows:

 ![Bildschirmfoto 2020-08-20 um 11.47.55](https://us1.discourse-cdn.com/elastic/original/3X/f/a/fa59e1ea01fe14716064033d5d2093ce04bf9bdd.png)

As you can see, it is about some employee feedback and contains a similarity search algorithm (I had to modify the source code and connect it to my own API for that purpose).

Now I need another input box, where I can type in an integer number. This input box should be small and right above the large query search box. Is there an easy way, to modify the layout, considering the Search UI is built on React?

Thank you for your help!

---

<div class="post-metadata">

**Author:** ![constancecchen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/constancecchen/32/71762_2.png) [@constancecchen](https://discuss.elastic.co/u/constancecchen)\
**Post date:** [August 28, 2020, 8:24pm UTC](https://discuss.elastic.co/t/modifying-the-search-ui-layout/245739/2 "2020-08-28T20:24:25Z")

</div>

Hi Spadel,

Yes, you can definitely customize many parts of Search UI. Check out the customization guide here:

> <https://github.com/elastic/search-ui/blob/master/ADVANCED.md#customization>

You probably want to look at the "Component Views and HTML" section, particularly looking at the [SearchBox](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#searchbox) component. You'll essentially be passing in a custom view with your own smaller input and then the larger query search box (which you can either copy the markup for or customize as needed).

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 25, 2020, 8:24pm UTC](https://discuss.elastic.co/t/modifying-the-search-ui-layout/245739/3 "2020-09-25T20:24:26Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.