docs: lots of improvements

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
 ---
 ::