Toggles & Checkboxes
Composants de selection binaire et de choix multiples/uniques.
BcToggle
Variantes
Default — vert succes (etat ON par defaut)
vue
<BcToggle v-model="val1" label="Notifications email" />Accent — gradient brand rouge-orange
vue
<!-- Reservé aux actions critiques ou parametres de securite importants -->
<BcToggle v-model="val2" variant="accent" label="Authentification 2FA" />Small — format compact
vue
<BcToggle v-model="val3" size="sm" label="Mode compact" />Disabled (3 etats : off, on, accent on)
vue
<BcToggle disabled label="Webhooks avances (desactive)" />
<BcToggle v-model="val4" disabled label="Mode sandbox (bloque)" />
<BcToggle v-model="val5" variant="accent" disabled label="2FA (bloque)" />Cas d'usage — Settings Panel
Panneau "Parametres de securite" illustrant les combinaisons de variantes en contexte reel.
Parametres de securite
vue
<BcToggle v-model="twoFa" variant="accent" label="Authentification 2FA" />
<BcToggle v-model="emailNotifs" label="Notifications email" />
<BcToggle :model-value="false" size="sm" disabled label="Mode sandbox (non disponible)" />
<BcToggle :model-value="false" size="sm" disabled label="Webhooks avances (non disponible)" />Props
| Prop | Type | Defaut | Description |
|---|---|---|---|
v-model | Boolean | false | Etat du toggle |
variant | 'default' | 'accent' | 'default' | Variante visuelle ('default' = vert succes, 'accent' = gradient brand rouge-orange) |
size | 'md' | 'sm' | 'md' | Taille |
disabled | Boolean | false | Desactive l'interaction |
label | String | — | Label affiche a droite |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | boolean | Changement d'etat (v-model) |
change | boolean | Changement d'etat |
BcCheckbox
Basique
vue
<BcCheckbox v-model="check1" label="J'accepte les conditions" />
<BcCheckbox v-model="check2" label="S'abonner a la newsletter" />Indeterminate
vue
<BcCheckbox v-model="checkIndet" label="Tout selectionner" indeterminate />Disabled
Avec hint
En cochant, vous acceptez nos CGU et notre politique de confidentialite
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | auto | Identifiant HTML |
modelValue | boolean | false | Etat coche (v-model) |
label | string | — | Label texte |
hint | string | — | Texte d'aide |
indeterminate | boolean | false | Etat indetermine |
disabled | boolean | false | Desactive |
name | string | — | Attribut name |
value | string | — | Valeur pour les groupes |
BcRadioGroup
Vertical (defaut)
vue
<BcRadioGroup
v-model="radioVal"
legend="Mode de contact"
:options="[
{ label: 'Email', value: 'email', hint: 'Recevoir par email' },
{ label: 'SMS', value: 'sms', hint: 'Recevoir par SMS' },
{ label: 'Courrier', value: 'mail' },
]"
/>Inline
vue
<BcRadioGroup v-model="radioInline" legend="Langue" inline
:options="[
{ label: 'Francais', value: 'fr' },
{ label: 'English', value: 'en' },
{ label: 'Deutsch', value: 'de' },
]" />Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | number | null | null | Valeur selectionnee (v-model) |
options | RadioOption[] | — | Options { label, value, disabled?, hint? } |
legend | string | — | Legende du fieldset |
name | string | auto | Attribut name partage |
disabled | boolean | false | Desactive tout le groupe |
inline | boolean | false | Disposition horizontale |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | number | Changement de selection (v-model) |
change | string | number | Changement de selection |
BcRadio
Bouton radio individuel avec label et hint optionnel. À utiliser seul ou dans un groupe custom. Pour un groupe complet avec fieldset/legend, préférer BcRadioGroup.
Démo
vue
<script setup>
import { ref } from 'vue'
const radio = ref('a')
</script>
<BcRadio v-model="radio" value="a" label="Option A" hint="Recommandée pour la plupart des cas" />
<BcRadio v-model="radio" value="b" label="Option B" />
<BcRadio v-model="radio" value="c" label="Option C (désactivée)" :disabled="true" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | number | null | null | Valeur sélectionnée (v-model) |
value | string | number | "on" | Valeur de ce radio |
label | string | "Option" | Texte affiché |
hint | string | "" | Texte d'aide sous le label |
name | string | "" | Attribut name HTML (pour grouper nativement) |
id | string | auto | ID HTML explicite (auto-généré si absent) |
disabled | boolean | false | Désactive le champ |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | number | Changement de sélection (v-model) |
change | string | number | Changement de sélection |