diff --git a/front/ui-docs/components/ui/pills.md b/front/ui-docs/components/ui/pills.md
index 52387a9ad..facfe8ceb 100644
--- a/front/ui-docs/components/ui/pills.md
+++ b/front/ui-docs/components/ui/pills.md
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 
 import Pills from '~/components/ui/Pills.vue';
+import Spacer from '~/components/ui/Spacer.vue';
 import Layout from '~/components/ui/Layout.vue';
 import Input from '~/components/ui/Input.vue';
 
@@ -23,6 +24,8 @@ const customModel = ref({
   others: ["#Melody", "#Rhythm"],
   custom: ["custom"],
 });
+
+const search = ref()
 </script>
 
 ```ts
@@ -116,3 +119,35 @@ const customModel = ref({
 <Layout class="preview" style="padding:16px">
   <Pills v-model="customModel" label="Custom" />
 </Layout>
+
+## Combine Pills with other input fields
+
+<Spacer />
+<Layout form flex>
+  <Input
+    v-model="search"
+    label="Search"
+    style="max-width: 150px;"
+  />
+  <Pills
+    v-model="customModel"
+    label="Filter by tags"
+    style="max-width: 250px;"
+  />
+  <Layout stack noGap label>
+    <span class="label"> Ordering </span>
+    <select>
+      <option
+        v-for="key in ['by date', 'by duration']"
+        :value="key"
+      >
+        key
+      </option>
+    </select>
+  </Layout>
+  <Input
+    v-model="search"
+    label="Option"
+    style="max-width: 50px;"
+  />
+</Layout>