Radio Group

One-of-many selection. Pair RadioGroup with RadioGroupItem entries; bind selected value with v-model.

Default

Three options arranged vertically.

Monthly

Yearly

Lifetime

Horizontal

Lay items horizontally with flex.

Small

Medium

Large

Disabled

Pass disabled on the group to disable every item.

Monthly

Yearly

Lifetime

With descriptions

Pair each option with a FieldLabel and a muted FieldDescription inside FieldContent for extra context.

Free

Up to 3 projects with community support.

Pro

Unlimited projects, analytics, and email support.

Team

Everything in Pro, plus roles and shared billing.

Choice cards

Wrap each Field in a FieldLabel to render options as bordered, selectable cards. The checked card is highlighted automatically.

Shipping method

Choose how quickly you want your order delivered.

Standard

Arrives in 5-7 business days. Free.

Express

Arrives in 2-3 business days. $12.

Overnight

Arrives the next business day. $28.

Fieldset with legend

Group the RadioGroup inside a FieldSet with a FieldLegend heading and a FieldDescription.

Notify me about…

Choose which activity sends you a notification.

All new messages

Direct messages and mentions

Nothing

Invalid

Set data-invalid on the FieldSet and aria-invalid on each item, then surface the message with FieldError.

How should we reach you?

Select a contact method to continue.

Text message

Do not contact me

Select a contact method.

API Reference

RadioGroup

Prop	Type	Default	Description
`modelValue`	`string`	—	Selected value. Supports v-model.
`defaultValue`	`string`	—	Initial value when v-model is not used.
`disabled`	`boolean`	`false`	Disable the entire group.

Event	Description
`update:modelValue`	Fires when the selected value changes. Enables v-model.

RadioGroupItem

Prop	Type	Default	Description
`value`	`string`	—	Unique value tracked by the group.
`id`	`string`	—	Match with a Label for click targets.
`disabled`	`boolean`	`false`	Disable this item.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`↑`	Moves selection to the previous item.
`↓`	Moves selection to the next item.
`←`	Moves selection to the previous item.
`→`	Moves selection to the next item.
`Space`	Selects the focused item.
`Tab`	Moves focus into or out of the group.

Uses a roving tabindex; only the selected (or first) radio is tabbable.
Applies radiogroup and radio roles with aria-checked on each item.

Questionnaire Rating