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

Usage

Import the parts you need from the component's folder.

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

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