RadioButton

Older standalone radio button with a boolean model, used by RadioGroup; not keyboard accessible.

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

Kept for existing screens. In new work use RadioButtonItem inside a RadioButtonGroup (or the group's items prop): it is a real radio, reachable and operable with the keyboard, and the group manages which option is selected.

How it behaves, if you have to maintain one:

• v-model is a boolean for this single radio. Clicking an unchecked radio sets it to true and emits change with { id, label, name }; clicking a checked one does nothing, so unchecking siblings is up to you.
• The native input is hidden and clicks are handled on the wrapper, so Tab, Space and arrow keys don't work.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import RadioButton from "@wikicasa-dev/components/UIKit/Radio/RadioButton";

const selected = ref<"email" | "phone">("email");
</script>

<template>
  <RadioButton id="contact-email" name="contact" label="Email" :model-value="selected === 'email'" @update:model-value="selected = 'email'" />
  <RadioButton id="contact-phone" name="contact" label="Telefono" :model-value="selected === 'phone'" @update:model-value="selected = 'phone'" />
</template>

#Do / Don't

• Don't use it in new designs; use RadioButtonItem in a RadioButtonGroup.
• Do give radios of the same set the same name.

#Styling hooks

• inputClasses styles the 16px circle (it gets the class checked when selected); labelClasses the label row.

#API

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

Props

Name	Type	Default	Required	Description
id	TID
dataCy	string
name	string
label	string		yes
modelValue	boolean	false
inputClasses	ClassTypeProp
labelClasses	ClassTypeProp

Events

Name	Payload
update:modelValue	[boolean]
change	[{ id: NonNullable<TID>; label: string; name?: string | undefined; }]

v-model

• v-model binds modelValue (boolean)

Slots

None.

Exposed (template ref)

None.