One radio option. Give every option in a group the same v-model and a distinct `value`. Like the checkbox, it renders the control only, so supply your own label.
Ejemplos
Group
Options share one v-model and each carries its own value.
<div class="flex flex-col gap-2">
<label class="flex items-center gap-2">
<UiRadio v-model="state.plan" value="free" /> Free
</label>
<label class="flex items-center gap-2">
<UiRadio v-model="state.plan" value="pro" /> Pro
</label>
<label class="flex items-center gap-2">
<UiRadio v-model="state.plan" value="team" /> Team
</label>
<label class="flex items-center gap-2 opacity-70">
<UiRadio v-model="state.plan" value="enterprise" disabled /> Enterprise (disabled)
</label>
</div>Sizes
Three sizes: sm, md and lg, matching UiCheckbox.
<div class="flex items-center gap-6">
<label class="flex items-center gap-2"><UiRadio v-model="state.s" value="a" size="sm" /> Small</label>
<label class="flex items-center gap-2"><UiRadio v-model="state.s" value="b" size="md" /> Medium</label>
<label class="flex items-center gap-2"><UiRadio v-model="state.s" value="c" size="lg" /> Large</label>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | string | number | boolean | null | The selected value shared across the group (v-model). |
| valueobligatorio | string | number | boolean | — | This option's value. |
| name | string | undefined | Native group name. |
| disabled | boolean | false | Disables the option. |
| size | string | 'md' | Control size (shares the checkbox scale). smmdlg |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | string | number | boolean | Emitted with this option's value when selected. |