> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/ui-ux-guide/patterns/search-area-detail-guide.md).

# Search Area Detail Guide

### Search and Data Items <a href="#undefined" id="undefined"></a>

The search area is where you set the conditions for querying data, and it is located above the results data area.

When a screen appears after clicking a menu, focus is placed on the first active element in the search area.

For List & Detail screens that handle list and detail CRUD on a single screen, the search area can be arranged top/bottom or left/right.

* Search area example

<figure><img src="https://tech.x2bee.com/download/attachments/14680085/Untitled%20Diagram.drawio.png" alt=""><figcaption></figcaption></figure>

#### 1. Search Condition Items <a href="#id-1" id="id-1"></a>

* Combo boxes are applied first for selection-type search conditions.
  * Use a combo box for 30 items or fewer — beyond that, use a popup
  * Always show a default option or “Select”
  * As an exception, ‘All’ may be applied as the default option when it is frequently selected
* Use a popup screen when the target data for a selection-type search condition has 30 or more items.
* Use radio buttons for selection search conditions with no future additional data, such as yes/no.\
  Exception) Used in limited cases where the selected data must be shown at a glance
* Use checkboxes when multiple selection is required.

<figure><img src="https://tech.x2bee.com/download/attachments/14680085/%EB%8D%B0%EC%9D%B4%ED%84%B0%20%EC%A1%B0%EA%B1%B4.png" alt=""><figcaption></figcaption></figure>

#### 2. Required Search Conditions <a href="#id-2" id="id-2"></a>

For required-input fields, indicate the required-input mark separately on the item.

<figure><img src="https://tech.x2bee.com/download/attachments/14680085/%ED%95%84%EC%88%98%20%ED%95%AD%EB%AA%A9%20%ED%91%9C%EA%B8%B0.png" alt=""><figcaption></figcaption></figure>

### Search Condition Item Details <a href="#undefined" id="undefined"></a>

#### 1. Item Placement <a href="#id-1" id="id-1"></a>

Place search condition items in order of importance, frequency of use, and scope, largest first.

* Place related conditions side by side.
* Exceptions may be made depending on importance.
* Item labels are left-aligned by default.

<figure><img src="https://tech.x2bee.com/download/attachments/14680085/%EC%A1%B0%EA%B1%B4%20%EC%A1%B0%ED%9A%8C%20%EB%B0%B0%EC%B9%98%201-c7b6b689ed4a6247d4bb1f20f3d1f15976f09ba1.png" alt=""><figcaption></figcaption></figure>

#### 2. Item Placement Order <a href="#id-2" id="id-2"></a>

Place items according to the workflow.

* Arrange in the order 1 → 2 → 3 → 4.
* The direction of movement is the Z direction, and you can move using the Tab key.

![](https://tech.x2bee.com/download/attachments/14680085/%EC%A1%B0%EA%B1%B4%20%EC%A1%B0%ED%9A%8C%20%EB%B0%B0%EC%B9%98.png)

#### 3. Search Button Position <a href="#id-3" id="id-3"></a>

Place the search button as a full-width button.

<figure><img src="https://tech.x2bee.com/download/attachments/14680085/%EC%A1%B0%ED%9A%8C%20%EC%A1%B0%EA%B1%B4%20%EB%B0%B0%EC%B9%98%203.png" alt=""><figcaption></figcaption></figure>

#### 4. Autocomplete Feature <a href="#id-4" id="id-4"></a>

Examples of applying the autocomplete feature are as follows.

* Provide a default value when there is frequently used search information.
* When there is pre-linked information, display the data in the search area and show the search results.
* The autocomplete feature is used when searching by entering a search term.

<figure><img src="https://tech.x2bee.com/download/attachments/14680085/%EC%A1%B0%ED%9A%8C%20%EC%A1%B0%EA%B1%B4%20%EB%B0%B0%EC%B9%98%204.png" alt=""><figcaption></figcaption></figure>