From 4eea9f54c076d0576bbf9279b3343ed061c6168a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 30 Jul 2024 18:30:19 +0200
Subject: [PATCH] docs(input): update

---
 docs/content/3.components/input.md | 161 ++++++++++++++++++++++++++++-
 1 file changed, 160 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md
index 1c8e9727..ab99aebd 100644
--- a/docs/content/3.components/input.md
+++ b/docs/content/3.components/input.md
@@ -8,7 +8,166 @@ links:
 
 ## Usage
 
-## Examples
+Use the `v-model` directive to control the value of the Input.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 'benjamincanac'
+---
+::
+
+### Type
+
+Use the `type` prop to change the input type. Defaults to `text`.
+
+Some types have been implemented in their own components such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc. and others have been styled like `file` for example.
+
+::component-code
+---
+items:
+  type:
+    - text
+    - password
+    - number
+    - search
+    - file
+props:
+  type: 'number'
+---
+::
+
+::callout{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types" target="_blank"}
+You can check all the available types on the MDN Web Docs.
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the Input is focused.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: gray
+  highlight: true
+  placeholder: 'Search...'
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Input.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: gray
+  variant: subtle
+  placeholder: 'Search...'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  size: xl
+  placeholder: 'Search...'
+---
+::
+
+### Icon
+
+Use the `icon` prop to show an [Icon](/components/icon) inside the Input.
+
+::component-code
+---
+prettier: true
+ignore:
+  - placeholder
+props:
+  icon: 'i-heroicons-magnifying-glass'
+  size: md
+  variant: outline
+  placeholder: 'Search...'
+---
+::
+
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+
+::component-code
+---
+prettier: true
+ignore:
+  - placeholder
+props:
+  trailingIcon: i-heroicons-at-symbol
+  placeholder: 'Enter your email'
+  size: md
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon on the Input.
+
+Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  loading: true
+  loadingIcon: ''
+  trailing: false
+  placeholder: 'Search...'
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  disabled: true
+  placeholder: 'Search...'
+---
+::
 
 ## API