Bouton radio

Utilisation isolée (v-model correspond à la propre valeur value) ou en groupe (LhRadioGroup gère la valeur sélectionnée).

Bouton radio

<template>
  <div class="demo-col" style="gap: 18px">
    <div>
      <LhRadioGroup v-model="style" name="painting-style">
        <LhRadio label="Pinceau fin" value="gongbi" />
        <LhRadio label="Style libre" value="xieyi" />
        <LhRadio label="Lavis" value="pomo" disabled />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadioGroup v-model="style" disabled>
        <LhRadio label="Pinceau fin" value="gongbi" />
        <LhRadio label="Style libre" value="xieyi" />
      </LhRadioGroup>
      <p class="demo-note">Groupe entier désactivé</p>
    </div>
    <div class="demo-row" style="gap: 20px; flex-wrap: wrap; align-items: center">
      <LhRadioGroup v-model="style" size="small">
        <LhRadio label="Pinceau fin" value="gongbi" />
      </LhRadioGroup>
      <LhRadioGroup v-model="style" size="large">
        <LhRadio label="Pinceau fin" value="gongbi" />
      </LhRadioGroup>
    </div>
    <div>
      <LhRadio v-model="standalone" label="Bouton radio isolé (value transmis)" :value="true" />
      <p class="demo-note">Style actuel : {{ style }} ; valeur isolée : {{ String(standalone) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ style: 'xieyi', standalone: false }),
}
</script>

Radio Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur de la sélection (model : modelValue/input)	unknown	—
value	Valeur de ce bouton radio	unknown	—
label	Texte (ou slot par défaut)	string	—
disabled / size / name	—	—	—

RadioGroup Props

Propriété	Description	Type	Valeur par défaut
v-model	Valeur sélectionnée du groupe	unknown	—
disabled / size / name	S'appliquent aux éléments enfants	—	—

Events

Événement	Description	Paramètres de rappel
input	Événement v-model	—
change	Déclenché lorsque la valeur sélectionnée change	(value)

En état disabled, l'événement change est intercepté.