Forms

Radio

A single radio button with label and description, for use inside `RadioGroup`.

html
<UiRadio />

Model value

modelValue controls whether this radio is the selected option in its group.

Selecting a Radio only ever sets it to checked — clicking an already-checked Radio does nothing, and nothing un-checks it except another Radio in the same group becoming checked. RadioGroup handles that coordination for you; a lone Radio won't uncheck itself.

Label

label is the text beside the radio, clickable along with it.

Description

description is secondary text under the label — what picking this option actually means, when the label alone is too short to say.

Disabled

disabled disables interaction with the Radio.

Color

color is the indicator's color when selected.

Variant

variant sets how much surface the option carries. list is a plain row with no box; card wraps it in a bordered surface that highlights when selected, which is better when the options are substantial enough to compare.

Indicator

indicator sets which side the dot sits on, or hidden to drop it — for card options where the highlight already says which one is picked.


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
boolean
false
Whether this Radio is the selected option in its group.
string
The label displayed next to the Radio.
string
Secondary text displayed below the label.
boolean
false
Disables interaction with the Radio.
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'
The color of the indicator when selected.
"list" | "card"
'list'
Displays as a plain list item or a bordered card that highlights when selected.
"start" | "end" | "hidden"
'start'
Position of the indicator relative to the label, or 'hidden' to omit it entirely.

Slots

Slot
default

Emits

Event
Payload
Description
update:modelValue
[value: boolean]