3.4 KiB
title, description, links
| title | description | links | |||||||
|---|---|---|---|---|---|---|---|---|---|
| RadioGroup | Display a set of radio buttons. |
|
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. ::
Orientation
You can change the orientation of the divider by setting the orientation prop to horizontal or vertical. Defaults to vertical.
::component-card
baseProps: options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }] modelValue: 'sms' props: orientation: 'horizontal'
::
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', disabled: true }] modelValue: 'sms' props: disabled: true
::
::callout{icon="i-heroicons-light-bulb"}
This prop also work on the Radio component and you can set the disabled field in the options to disable a specific Radio.
::
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
::tabs :component-props{label="Radio" slug="URadio"} :component-props{label="RadioGroup"} ::
Config
::tabs :component-preset{label="Radio" slug="Radio"} :component-preset{label="RadioGroup"} ::