ui/docs/content/3.components/radio-group.md

title, description, links

title	description	links
RadioGroup	A set of radio buttons to select a single option from a list.	label icon to RadioGroup i-custom-radix-vue https://www.radix-vue.com/components/radio-group.html label icon to GitHub i-simple-icons-github https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/RadioGroup.vue

Usage

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

ignore:

• modelValue
• items 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

ignore:

• items 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
• items 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
• items 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
• items 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
• items 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
• items 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

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme