Skip to content

Radio List

RadioList Props ​

NameTypeDefaultDescription
v-modelstring | number—Required. Currently selected value.
labelstring—Required. Accessible name of the group.
idstring—ID of the group container. Auto-generated when omitted.
namestring—Shared name for the radios. Auto-generated when omitted.
optionsRadioOption[]—Array of options.
widthnumber | string—Component width. Numbers are treated as px.
descriptionstring—Description shown below the label.
isLabelHiddenbooleanfalseHide the visual label while keeping the accessible name.
isDisabledbooleanfalseDisable the entire group.
isReadOnlybooleanfalseMake the entire group read-only.
isRequiredbooleanfalseShow required indicator and enable native required validation.
isOptionalbooleanfalseShow optional indicator. Takes precedence over isRequired.
optionalLabelstring'Optional'Text for the optional indicator.
requiredLabelstring'Required'Text for the required indicator.
statusFieldStatusInput—Status type, message, and message ID.
statusVariant'attached' | 'detached' | 'tooltip''detached'Where to display the status message.
labelIconComponent—Decorative icon before the label.
labelTooltipstring—Tooltip shown next to the label.

Status ​

status has these fields:

  • type: 'error', 'warning', or 'success'.
  • message: message text.
  • messageId: message ID.

The default statusVariant is detached, so the message appears below the list.

Events ​

  • update:modelValue(value): emitted after the selected value changes.
  • change(value, event): fired after the model updates.

event is a cancellable RadioChangeEvent. event.detail.originalEvent keeps the native event.

Slots ​

  • labelIcon: decorative icon before the label. Overrides the labelIcon prop.

Template ref ​

  • element: HTMLDivElement | null.

Native attributes ​

class and style are applied to the outer wrapper. Unrecognized native attributes and listeners are forwarded to the group container.