RadioGroup

Older radio list driven by radioValues objects, emitting the selected object.

import RadioGroup from "@wikicasa-dev/components/UIKit/Radio/RadioGroup";

Kept for existing screens. In new work use RadioButtonGroup: it binds a plain value with v-model, is a real radiogroup with arrow-key navigation, and can be cleared by setting the model to undefined.

How it differs, if you have to maintain one:

• It has no modelValue input: the initial choice is the item with active: true, and it only emits update:modelValue with the selected { id, label, payload? } object (or null after a reset).
• Set v-model:resetRadio to true to clear it; set v-model:refresh to true to re-read radioValues after changing them.
• Its RadioButtons are mouse-only: they can't be reached or changed with the keyboard.

#Usage

<script setup lang="ts">
import RadioGroup from "@wikicasa-dev/components/UIKit/Radio/RadioGroup";
import type { RadioButtonType } from "@wikicasa-dev/components";

const purposes: RadioButtonType<number>[] = [
  { id: 1, label: "Voglio vendere", active: true },
  { id: 2, label: "Voglio comprare" },
  { id: 3, label: "Solo curiosità" },
];
const onChange = (v: RadioButtonType<number> | null) => console.log(v?.id);
</script>

<template>
  <RadioGroup :radio-values="purposes" data-cy="valuation-purpose" @update:model-value="onChange" />
</template>

#Do / Don't

• Don't use it in new designs; use RadioButtonGroup.
• Do keep ids unique; selection is matched by id.
• Do use the radio_elements slot (handleClick, activeValue, reset, isActive) only to restyle items in an existing screen.

#Styling hooks

• class goes on the .radio-group-container wrapper; radioContainerClasses on each RadioButton.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
radioValues	RadioButtonType<TID, TPayload>[]	[]
dataCy	string
radioContainerClasses	ClassTypeProp
resetRadio	Optional<boolean>	false
refresh	boolean	false		If true, we will reinitialized the inner data of the component

Events

Name	Payload
update:modelValue	[Nullable<RadioButtonType<TID, TPayload>>]
update:refresh	[value: boolean]
update:resetRadio	[value: Optional<boolean>]

v-model

• v-model:resetRadio (Optional<boolean>)
• v-model:refresh (boolean)

Slots

Name	Slot props
default	{ handleClick: (elem: RadioButtonType<TID, TPayload>) => void; activeValue: { id?: UnwrapRef<TID> | undefined; label: string; payload?: UnwrapRef<TPayload> | undefined; active?: boolean | undefined; } | null; reset: () => void; isActive: (elem: RadioButtonType<TID, TPayload>) => boolean; }
radio_elements	{ handleClick: (elem: RadioButtonType<TID, TPayload>) => void; activeValue: { id?: UnwrapRef<TID> | undefined; label: string; payload?: UnwrapRef<TPayload> | undefined; active?: boolean | undefined; } | null; reset: () => void; isActive: (elem: RadioButtonType<TID, TPayload>) => boolean; }

Exposed (template ref)

None.