docs: lots of improvements

docs/content/3.forms/1.input.md

@@ -24,6 +24,31 @@ props:
 ---
 ::
 
+### Placeholder
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Appearance
+
+Use the `appearance` prop to change the style of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+---
+::
+
 ### Icon
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
@@ -67,6 +92,8 @@ excludedProps:
 
 Use the `loading` prop to show a loading icon and disable the Input.
 
+Use the `loadingIcon` prop to set a different icon or change it globally in `ui.input.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
 ::component-card
 ---
 baseProps:

docs/content/3.forms/2.textarea.md

@@ -11,6 +11,61 @@ baseProps:
 ---
 ::
 
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Appearance
+
+Use the `appearance` prop to change the style of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  placeholder: 'Search...'
+  appearance: 'white'
+  disabled: true
+excludedProps:
+  - placeholder
+---
+::
+
 ## Props
 
 :component-props

docs/content/3.forms/3.select.md

@@ -8,11 +8,110 @@ github: true
 ---
 baseProps:
   name: 'select'
-  modelValue: 'Canada'
+  modelValue: 'United States'
+props:
   options:
     - 'United States'
     - 'Canada'
     - 'Mexico'
+excludedProps:
+  - options
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Appearance
+
+Use the `appearance` prop to change the style of the Select.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  appearance: 'white'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  appearance: 'white'
+  size: 'sm'
+  placeholder: 'Search...'
+excludedProps:
+  - icon
+  - placeholder
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  placeholder: 'Search...'
+  appearance: 'white'
+  disabled: true
+excludedProps:
+  - placeholder
 ---
 ::
 

docs/content/3.forms/4.select-menu.md

@@ -7,6 +7,10 @@ headlessui:
 
 ## Usage
 
+The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [size](/forms/select#size), [placeholder](/forms/select#placeholder), [appearance](/forms/select#appearance), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
+
+Like the Select component, you can use the `options` prop to pass an array of strings or objects.
+
 ::component-example
 #default
 :select-menu-example-basic{class="max-w-[12rem] w-full"}
@@ -25,7 +29,7 @@ const selected = ref(people[0])
 ```
 ::
 
-You can use multiple values but you have to override the `#label` slot and handle the display yourself.
+You can use the `multiple` prop to select multiple values but you have to override the `#label` slot and handle the display yourself.
 
 ::component-example
 #default
@@ -76,7 +80,7 @@ const selected = ref(people[3])
 ```
 ::
 
-You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key.
+You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `optionAttribute` prop that defaults to `label`.
 
 ::component-example
 #default
@@ -131,6 +135,10 @@ const selected = ref(people[0])
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
 
+Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+Use the `selectedIcon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
+
 ::component-card
 ---
 baseProps:
@@ -161,21 +169,6 @@ props:
 ---
 ::
 
-### Disabled
-
-Use the `disabled` prop to disable the SelectMenu.
-
-::component-card
----
-baseProps:
-  class: 'max-w-[12rem] w-full'
-  placeholder: 'Select a person'
-  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-props:
-  disabled: true
----
-::
-
 ## Props
 
 :component-props

docs/content/3.forms/5.checkbox.md

@@ -5,6 +5,65 @@ github: true
 ## Usage
 
 ::component-card
+---
+baseProps:
+  name: 'checkbox'
+---
+::
+
+### Label
+
+Use the `label` prop to display a label on the right.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox1'
+props:
+  label: 'Label'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox2'
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Checkbox.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox3'
+props:
+  label: 'Label'
+  help: 'Please check this box'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Checkbox.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox4'
+  modelValue: true
+props:
+  disabled: true
+---
 ::
 
 ## Props

docs/content/3.forms/6.radio.md

@@ -5,6 +5,65 @@ github: true
 ## Usage
 
 ::component-card
+---
+baseProps:
+  name: 'radio'
+---
+::
+
+### Label
+
+Use the `label` prop to display a label on the right.
+
+::component-card
+---
+baseProps:
+  name: 'radio1'
+props:
+  label: 'Label'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label.
+
+::component-card
+---
+baseProps:
+  name: 'radio2'
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Radio.
+
+::component-card
+---
+baseProps:
+  name: 'radio3'
+props:
+  label: 'Label'
+  help: 'Please choose one'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Radio.
+
+::component-card
+---
+baseProps:
+  name: 'radio4'
+  value: true
+props:
+  disabled: true
+---
 ::
 
 ## Props