Skip to main content
Vuetify0 is now in alpha!
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

API reference for the Radio components.

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?

© 2016-1970 Vuetify, LLC
Ctrl+/