BjRadio

Bouton radio Vue : chaque instance a une value obligatoire ; le v-model du groupe est la chaîne sélectionnée. Libellé, aide, name partagé et option désactivée.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjRadio } from '@flrxnt/dsbj/vue'

const plan = ref('basic')
</script>

<template>
  <BjRadio v-model="plan" name="plan" value="basic" label="Formule de base" />
  <BjRadio v-model="plan" name="plan" value="pro" label="Formule professionnelle" hint="Facturation annuelle" />
</template>

Aperçu

Formule de base Formule professionnelle Facturation annuelle

Groupe (même v-model et name)

GratuitPayant

<BjRadio v-model="tier" name="tier" value="free" label="Gratuit" />
<BjRadio v-model="tier" name="tier" value="paid" label="Payant" />

Option désactivée

Option AOption B (indisponible)

<BjRadio v-model="opt" name="opt" value="a" label="Option A" />
<BjRadio v-model="opt" name="opt" value="b" label="Option B (indisponible)" :disabled="true" />

Avec hint sur une option

Standard Express Livraison sous 24 h

<BjRadio v-model="ship" name="ship" value="std" label="Standard" />
<BjRadio v-model="ship" name="ship" value="exp" label="Express" hint="Livraison sous 24 h" />

Slot par défaut

Comme pour la checkbox, le slot remplace le texte du libellé.

Bleu — classique

<BjRadio v-model="color" name="color" value="blue">
  <strong>Bleu</strong> — classique
</BjRadio>

Props

Prop	Description
`modelValue`	Valeur sélectionnée du groupe (v-model), chaîne.
`value`	Valeur de cette option (obligatoire).
`label`	Texte du libellé (contenu par défaut du slot).
`hint`	Texte d’aide sous le libellé.
`disabled`	Désactive ce radio.
`name`	Attribut name commun au groupe.