RadioButtonGroup

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

Use when the user must pick exactly one of a few visible options: contract type ("Vendita" / "Affitto" / "Asta"), property condition, a locality. It renders a role="radiogroup" with arrow-key navigation. For long lists use AccessibleSelect; for exactly two modes shown as a pill use BaseComplexToggle.

Two ways to render:

• Simple: items ({ value, label, dataCy?, required?, as? }[]) renders a RadioButtonItem per entry.
• Custom: put RadioButtonItems (classic radio look) or RadioGroupItemPrimitives (unstyled, e.g. segmented buttons) in the default slot.

#Usage

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

const contract = ref("vendita");
const rooms = ref<number>();
</script>

<template>
  <RadioButtonGroup
    v-model="contract"
    aria-label="Tipo di contratto"
    data-cy="contract-type"
    :items="[
      { value: 'vendita', label: 'Vendita' },
      { value: 'affitto', label: 'Affitto' },
      { value: 'asta', label: 'Asta' },
    ]"
  />

  <RadioButtonGroup v-model="rooms" aria-label="Numero di locali" orientation="horizontal" style="display: flex; gap: 20px">
    <RadioButtonItem v-for="n in [1, 2, 3, 4]" :key="n" :value="n">{{ n }}+ locali</RadioButtonItem>
  </RadioButtonGroup>
</template>

#Do / Don't

• Do name the group with aria-label or aria-labelledby (it goes on the radiogroup element), and show a visible heading above it.
• Do give each option a unique value; v-model holds the selected one (undefined until chosen, or defaultValue for an uncontrolled start).
• Do set orientation to match the layout and loop to wrap arrow-key navigation from last to first (off by default).
• Do use name and required when the group sits in a native <form>; disabled locks every option.
• Don't mix items and slot content: the slot replaces the generated items.

#Styling hooks

• The root takes class / style for layout (it is a plain block by default; use flex or grid for rows).
• Generated items use RadioButtonItem styling (.uikit-radio-btn { --font-size }). For different per-item classes, render items in the slot.

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string
items	RadioButtonItem<T>[]	[]
defaultValue	T
disabled	boolean			When true, prevents the user from interacting with radio items.
dir	Direction			The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
orientation	DataOrientation			The orientation of the component.
asChild	boolean			Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as	AsTag | Component			The element or component this component should render as. Can be overwritten by asChild.
required	boolean			When true, indicates that the user must set the value before the owning form can be submitted.
loop	boolean			When true, keyboard navigation will loop from last item to first, and vice versa.
name	string			The name of the field. Submitted with its owning form as part of a name/value pair.
modelValue	T

Events

Name	Payload
update:modelValue	[value: T | undefined]

v-model

• v-model binds modelValue (T)

Slots

Name	Slot props
default

Exposed (template ref)

None.