From 77090134d5fa35ac08fc51cb70867b936a431ead Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 29 Dec 2024 17:52:02 +0100
Subject: [PATCH] chore(ui-docs): add example code to input docs

---
 front/ui-docs/components/ui/input.md | 49 ++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/front/ui-docs/components/ui/input.md b/front/ui-docs/components/ui/input.md
index ce7526c77..62a6e2838 100644
--- a/front/ui-docs/components/ui/input.md
+++ b/front/ui-docs/components/ui/input.md
@@ -57,14 +57,19 @@ You can add a template on the right-hand side of the input to guide the user's i
 
 ### Search
 
+```vue-html
+<Input search />
+```
+
 <Input search />
 
 ### Password
 
+```vue-html
 <Layout flex no-gap style="align-items:flex-end">
   <Spacer v
     :size="80"
-    style="outline:1px solid red; align-self: baseline;"
+    style="align-self: baseline;"
   />
   <Input>
     <template #label>
@@ -75,7 +80,7 @@ You can add a template on the right-hand side of the input to guide the user's i
 <Layout flex no-gap style="align-items:flex-end">
   <Spacer v
     :size="80"
-    style="outline:1px solid red; align-self: baseline;"
+    style="align-self: baseline;"
   />
   <Input password>
     <template #label>
@@ -83,3 +88,43 @@ You can add a template on the right-hand side of the input to guide the user's i
     </template>
   </Input>
 </Layout>
+```
+
+<!-- Implement a component for baseline alignments like this -->
+
+<Layout flex no-gap style="align-items:flex-end">
+  <Spacer v
+    :size="80"
+    style="align-self: baseline;"
+  />
+  <Input>
+    <template #label>
+      User name
+    </template>
+  </Input>
+</Layout>
+<Layout flex no-gap style="align-items:flex-end">
+  <Spacer v
+    :size="80"
+    style="align-self: baseline;"
+  />
+  <Input password>
+    <template #label>
+      Password
+    </template>
+  </Input>
+</Layout>
+
+## Fallthrough attributes
+
+If you add attributes that are no props, they will be added to the component:
+
+```vue-html
+<Input required
+  field-id="password-field"
+/>
+```
+
+<Input required
+  field-id="password-field"
+/>