Skip to main content
Vuetify0 is now a release candidate!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

Radio API

A radio button for single-selection groups with roving focus and shared v-model state.

Explore these related pages for additional context and usage patterns.

PageCategory
RadioForms
createSingleSelection
SingleProviders
CheckboxForms

Radio.Root

Props

id

any

Unique identifier (auto-generated if not provided)

Default: useId()

label

string | undefined

Optional display label (passed through to slot)

value

V | undefined

Value associated with this radio for group selection and form submission

name

string | undefined

Form field name - triggers auto hidden input when provided

form

string | undefined

Associate with a form by ID (for radios outside the form element)

disabled

MaybeRefOrGetter<boolean> | undefined

Disables this radio (prevents selection and keyboard focus)

Default: false

namespace

string | undefined

Namespace for context provision to children (Indicator, HiddenInput)

Default: "v0:radio:root"

groupNamespace

string | undefined

Namespace for connecting to parent Radio.Group

Default: "v0:radio:group"

ariaLabelledby

string | undefined

ID of element that labels this radio

ariaDescribedby

string | undefined

ID of element that describes this radio

ariaInvalid

boolean | undefined

Marks the radio as invalid for form validation

Slots

default

RadioRootSlotProps<V>

Default slot with radio state, actions, and ARIA attributes

Radio.Group

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:radio:group"

disabled

boolean | undefined

Disables the entire radio group

Default: false

mandatory

boolean | "force" | undefined

Auto-selects the first non-disabled item on mount. Radio groups are inherently mandatory (selection can only be changed, not cleared), so mandatory="force" is the only meaningful option.

Default: false

label

string | undefined

Accessible name for the group

ariaLabelledby

string | undefined

ID of element that labels this group

ariaDescribedby

string | undefined

ID of element that describes this group

ariaRequired

boolean | undefined

Whether a selection is required before form submission

name

string | undefined

Form field name - enables native form submission for all radios in group

activation

any

Activation mode controlling when selection occurs: - automatic (default): Selection follows focus (arrow keys select) - manual: Selection requires explicit Enter/Space key press Per WAI-ARIA APG, radio groups should have selection follow focus by default. Use manual for toolbar radio groups or when deliberate selection is preferred.

Default: "automatic"

modelValue

T | undefined

Events

Slots

default

RadioGroupSlotProps

Default slot with group state and ARIA attributes

Radio.HiddenInput

Props

namespace

string | undefined

Namespace for context injection from parent Radio.Root

Default: "v0:radio:root"

name

string | undefined

Form field name (defaults to context value from Radio.Group)

value

string | undefined

Submitted value when checked (defaults to context value or 'on'). Use to override the Radio.Root value for form submission.

form

string | undefined

Associate with form by ID (for inputs outside the form element)

Radio.Indicator

Props

namespace

string | undefined

Namespace for context injection from parent Radio.Root

Default: "v0:radio:root"

Slots

default

RadioIndicatorSlotProps

Default slot for custom indicator content

Was this page helpful?

Ctrl+/