docs(radio-group): update

2026-01-31 04:07:56 +01:00 · 2024-07-31 14:16:23 +02:00
parent b9e3fcb0f1
commit c3ee509c65
9 changed files with 207 additions and 53 deletions
--- a/docs/content/3.components/radio-group.md
+++ b/docs/content/3.components/radio-group.md
@@ -12,7 +12,185 @@ links:

 ## Usage

-## Examples
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+Use the `v-model` directive to control the value of the RadioGroup.
+
+::component-code
+---
+external:
+  - modelValue
+  - items
+props:
+  modelValue: '1'
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+external:
+  - items
+props:
+  defaultValue: '1'
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::
+
+### Legend
+
+Use the `legend` prop to set the legend of the RadioGroup.
+
+::component-code
+---
+ignore:
+  - defaultValue
+external:
+  - items
+props:
+  defaultValue: '1'
+  legend: 'Legend'
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the RadioGroup. Defaults to `vertical`.
+
+::component-code
+---
+ignore:
+  - defaultValue
+external:
+  - items
+props:
+  defaultValue: '1'
+  orientation: 'horizontal'
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the RadioGroup.
+
+::component-code
+---
+ignore:
+  - defaultValue
+external:
+  - items
+props:
+  defaultValue: '1'
+  color: 'gray'
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the RadioGroup.
+
+::component-code
+---
+ignore:
+  - defaultValue
+external:
+  - items
+props:
+  defaultValue: '1'
+  size: 'xl'
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the RadioGroup.
+
+::component-code
+---
+ignore:
+  - defaultValue
+external:
+  - items
+props:
+  defaultValue: '1'
+  disabled: true
+  items:
+    - label: 'Option 1'
+      description: 'This is the first option.'
+      value: '1'
+    - label: 'Option 2'
+      description: 'This is the second option.'
+      value: '2'
+    - label: 'Option 3'
+      description: 'This is the third option.'
+      value: '3'
+---
+::

 ## API