docs: improve forms usage with examples

docs/components/content/examples/CheckboxExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
+</template>

docs/components/content/examples/InputExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" />
+</template>

docs/components/content/examples/RadioExample.vue

@@ -0,0 +1,23 @@
+<script setup>
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <div class="space-y-1">
+    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+  </div>
+</template>

docs/components/content/examples/SelectExample.vue

@@ -0,0 +1,9 @@
+<script setup>
+const countries = ['United States', 'Canada', 'Mexico']
+
+const country = ref(countries[0])
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" />
+</template>

docs/components/content/examples/TextareaExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UTextarea v-model="value" />
+</template>

docs/components/content/examples/ToggleExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="selected" />
+</template>

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

@@ -5,11 +5,22 @@ description: Display an input field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'input'
----
+Use a `v-model` to make the Input reactive.
+
+::component-example
+#default
+:input-example
+
+#code
+```vue
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" />
+</template>
+```
 ::
 
 ### Style

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

@@ -5,11 +5,22 @@ description: Display a textarea field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'textarea'
----
+Use a `v-model` to make the Textarea reactive.
+
+::component-example
+#default
+:textarea-example
+
+#code
+```vue
+<script setup>
+const value = ref('')
+</script>
+
+<template>
+  <UTextarea v-model="value" />
+</template>
+```
 ::
 
 ### Style

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

@@ -7,19 +7,24 @@ description: Display a select field.
 
 The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/forms/select-menu) component.
 
-::component-card
----
-baseProps:
-  name: 'select'
-  modelValue: 'United States'
-props:
-  options:
-    - 'United States'
-    - 'Canada'
-    - 'Mexico'
-excludedProps:
-  - options
----
+Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
+
+::component-example
+#default
+:select-example
+
+#code
+```vue
+<script setup>
+const countries = ['United States', 'Canada', 'Mexico']
+
+const country = ref(countries[0])
+</script>
+
+<template>
+  <USelect v-model="country" :options="countries" />
+</template>
+```
 ::
 
 ### Style

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

@@ -10,8 +10,6 @@ headlessui:
 
 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 [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
 
-### Options
-
 Like the Select component, you can use the `options` prop to pass an array of strings or objects.
 
 ::component-example

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

@@ -5,11 +5,22 @@ description: Display a checkbox field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'checkbox'
----
+Use a `v-model` to make the Checkbox reactive.
+
+::component-example
+#default
+:checkbox-example
+
+#code
+```vue
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
+</template>
+```
 ::
 
 ### Label

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

@@ -5,11 +5,36 @@ description: Display a radio field.
 
 ## Usage
 
-::component-card
----
-baseProps:
-  name: 'radio'
----
+Use a `v-model` to make the Radio reactive.
+
+::component-example
+#default
+:radio-example
+
+#code
+```vue
+<script setup>
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+</template>
+```
 ::
 
 ### Label

docs/content/3.forms/7.toggle.md

@@ -8,7 +8,22 @@ headlessui:
 
 ## Usage
 
-::component-card
+Use a `v-model` to make the Toggle reactive.
+
+::component-example
+#default
+:toggle-example
+
+#code
+```vue
+<script setup>
+const selected = ref(false)
+</script>
+
+<template>
+  <UToggle v-model="selected" />
+</template>
+```
 ::
 
 ### Icon