RadioButtonItem

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

One option of a RadioButtonGroup, with the standard radio look. Use it in the group's slot when the simple items prop isn't enough: custom label content, per-item classes, disabled on a single option, or items interleaved with other markup. For a fully custom look (segmented buttons, cards) use RadioGroupItemPrimitive instead.

The default slot is the label; it is linked to the radio, so clicking the text selects it.

#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 localities = [
  { id: 101, name: "Milano Marittima", listings: 84 },
  { id: 102, name: "Cervia", listings: 212 },
  { id: 103, name: "Pinarella", listings: 0 },
];
const locality = ref<number>();
</script>

<template>
  <RadioButtonGroup v-model="locality" aria-label="Località">
    <RadioButtonItem
      v-for="l in localities"
      :key="l.id"
      :value="l.id"
      :disabled="l.listings === 0"
      :data-cy="`locality_${l.id}`"
    >
      {{ l.name }} <small>({{ l.listings }} annunci)</small>
    </RadioButtonItem>
  </RadioButtonGroup>
</template>

#Do / Don't

• Do always place it inside RadioButtonGroup; it doesn't work on its own.
• Do give it a value unique within the group, and label text in the default slot (no slot means no label).
• Do make the label fill the row (label-classes) when the whole row should be clickable.
• Don't add click handlers to select it; listen to the group's v-model.

#Styling hooks

• .uikit-radio-btn { --font-size } (default 16px); class goes on this row wrapper (flex, 8px gap).
• itemClasses styles the 18px circle (.uikit-radio-group-item, with data-state="checked|unchecked"); the inner dot is .uikit-radio-group-indicator.
• labelClasses styles the <label>.

#API

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

Props

Name	Type	Default	Required	Description
itemClasses	ClassTypeProp
labelClasses	ClassTypeProp
dataCy	string
disabled	boolean			When true, prevents the user from interacting with the radio item.
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.
value	AcceptableValue			The value given as data when submitted with a name.
id	string
name	string			The name of the field. Submitted with its owning form as part of a name/value pair.

Events

None.

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.