ui/docs/content/3.forms/6.radio-group.md

title, description, links

title	description	links
RadioGroup	Display a set of radio buttons.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/RadioGroup.vue

Usage

Use a v-model to make the RadioGroup reactive.

:component-example{component="radio-group-example"}

Alternatively, you can use individual Radio components:

:component-example{component="radio-example"}

::callout{icon="i-heroicons-light-bulb"} If using the RadioGroup component, you can customize the Radio options by using the uiRadio prop. ::

Legend

Use the legend prop to add a legend to the RadioGroup.

::component-card

baseProps: options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }] modelValue: 'sms' props: legend: 'Legend'

::

Style

Use the color prop to change the style of the RadioGroup.

::component-card

baseProps: options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }] modelValue: 'sms' props: color: 'primary'

::

::callout{icon="i-heroicons-light-bulb"} This prop also work on the Radio component. ::

Disabled

Use the disabled prop to disable the RadioGroup.

::component-card

baseProps: options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }] modelValue: 'sms' props: disabled: true

::

::callout{icon="i-heroicons-light-bulb"} This prop also work on the Radio component. ::

Label

Use the label prop to display a label on the right of the Radio.

::component-card

props: label: 'Label'

::

Required

Use the required prop to display a red star next to the label of the Radio.

::component-card

props: label: 'Label' required: true

::

Help

Use the help prop to display some text under the Radio.

::component-card

props: label: 'Label' help: 'Please choose one'

::

Slots

label

Use the #label slot to override the label of each option.

:component-example{component="radio-group-label-example"}

Alternatively, you can do the same with individual Radio:

::component-card

slots: label: Label

#label [Label]{.italic} ::

legend

Use the #legend slot to override the content of the legend.

::component-card

baseProps: options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }] modelValue: 'sms' slots: legend: Legend

#legend [Legend]{.italic} ::

Props

:component-props

:u-divider{label="Radio" type="dashed" class="my-12"}

:component-props{slug="URadio"}

Config

:component-preset

:component-preset{slug="Radio"}