[ci skip] UX Guide: add section on search boxux-guide-search-box

3 files changed, 13 insertions, 0 deletions

diff --git a/doc/development/ux_guide/components.md b/doc/development/ux_guide/components.md
index 28383ad7dfc..706bb180912 100644
--- a/doc/development/ux_guide/components.md
+++ b/doc/development/ux_guide/components.md
@@ -12,6 +12,7 @@
 * [Panels](#panels)
 * [Alerts](#alerts)
 * [Forms](#forms)
+* [Search box](#search-box)
 * [File holders](#file-holders)
 * [Data formats](#data-formats)
 
@@ -215,6 +216,18 @@ Horizontal form (`form.horizontal-form`) with label rendered inline with input.
 
 ---
 
+## Search box
+
+Search boxes across GitLab have a consistent rest, active and text entered state. When text isn't entered in the box, there should be a magnifying glass right aligned with the input field. When text is entered, the magnifying glass should become a x, allowing users to clear their text.
+
+![Search box](img/components-searchbox.png)
+
+If needed, we indicate the scope of the search in the search box.
+
+![Scoped Search box](img/components-searchboxscoped.png)
+
+---
+
 ## File holders
 A file holder (`.file-holder`) is used to show the contents of a file inline on a page of GitLab.
 
diff --git a/doc/development/ux_guide/img/components-searchbox.png b/doc/development/ux_guide/img/components-searchbox.png
new file mode 100644
index 00000000000..a25189296ba
--- /dev/null
+++ b/doc/development/ux_guide/img/components-searchbox.png
diff --git a/doc/development/ux_guide/img/components-searchboxscoped.png b/doc/development/ux_guide/img/components-searchboxscoped.png
new file mode 100644
index 00000000000..b116d714848
--- /dev/null
+++ b/doc/development/ux_guide/img/components-searchboxscoped.png