Formulaires avances

Composants de formulaire specialises : selects recherchables, combobox, date/heure, telephone, IBAN, mot de passe et OTP.

BcSelectSearchable

Select avec recherche integree dans le dropdown.

Fruit prefere

Tapez pour filtrer les options

vue

<BcSelectSearchable
  v-model="selectVal"
  label="Fruit prefere"
  placeholder="Rechercher un fruit..."
  :options="fruits"
  hint="Tapez pour filtrer les options"
/>

Props

Prop	Type	Default	Description
`modelValue`	`string \| number \| null`	`null`	Valeur selectionnee (v-model)
`label`	`string`	—	Label du champ
`placeholder`	`string`	`"Selectionner..."`	Placeholder
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`options`	`SelectOption[]`	—	Options `{ value, label, disabled?, keywords? }`
`disabled`	`boolean`	`false`	Desactive
`required`	`boolean`	`false`	Requis
`emptyLabel`	`string`	`"Aucun resultat"`	Texte si aucun resultat

BcCombobox

Champ avec libre saisie et suggestions.

Fruit

vue

<BcCombobox
  v-model="comboVal"
  label="Fruit"
  placeholder="Rechercher ou saisir..."
  :options="fruits"
/>

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Valeur saisie (v-model)
`label`	`string`	—	Label
`placeholder`	`string`	`"Rechercher..."`	Placeholder
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`options`	`ComboboxOption[]`	—	Suggestions `{ value, label, keywords?, disabled? }`
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive
`emptyLabel`	`string`	`"Aucun resultat"`	Texte si aucun resultat

BcDatePicker

Date de naissance

Format : JJ/MM/AAAA

vue

<BcDatePicker v-model="dateVal" label="Date de naissance" hint="Format : JJ/MM/AAAA" />

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Date au format ISO (v-model)
`label`	`string`	—	Label
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`min`	`string`	—	Date minimale
`max`	`string`	—	Date maximale
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive
`readonly`	`boolean`	`false`	Lecture seule

BcTimePicker

Heure de rendez-vous

Format 24h

vue

<BcTimePicker v-model="timeVal" label="Heure de rendez-vous" hint="Format 24h" />

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Heure au format HH:MM (v-model)
`label`	`string`	—	Label
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`min`	`string`	—	Heure minimale
`max`	`string`	—	Heure maximale
`step`	`number`	`60`	Pas en secondes
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive

BcPhoneInput

Champ telephone avec selecteur de pays et indicatif.

Telephone

vue

<BcPhoneInput
  v-model="phoneVal"
  v-model:country-code="phoneCode"
  label="Telephone"
  :countries="countries"
  placeholder="6 12 34 56 78"
/>

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Numero de telephone (v-model)
`countryCode`	`string`	`""`	Indicatif pays (v-model:country-code)
`countries`	`PhoneCountry[]`	—	Liste `{ code, label, flag?, disabled? }`
`label`	`string`	—	Label
`placeholder`	`string`	`"6 12 34 56 78"`	Placeholder
`hint`	`string`	—	Texte d'aide
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive

BcIbanInput

Champ IBAN avec formatage automatique et validation en temps reel.

IBAN

Entrez votre IBAN

Format a verifier

vue

<BcIbanInput v-model="ibanVal" label="IBAN" hint="Entrez votre IBAN" />

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Valeur IBAN formatee (v-model)
`label`	`string`	—	Label
`hint`	`string`	—	Texte d'aide
`placeholder`	`string`	`"FR76 3000 ..."`	Placeholder
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive
`countryWhitelist`	`string[]`	`[]`	Codes pays autorises
`liveValidation`	`boolean`	`true`	Validation en temps reel

BcPasswordInput

Champ mot de passe avec toggle de visibilite et indicateur de force.

Mot de passe

Solidite: Vide

vue

<BcPasswordInput v-model="passVal" label="Mot de passe"
  placeholder="Entrez votre mot de passe" show-strength />

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Mot de passe (v-model)
`label`	`string`	—	Label
`placeholder`	`string`	—	Placeholder
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`state`	`"default" \| "success" \| "error"`	`"default"`	Etat visuel
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive
`autocomplete`	`string`	`"current-password"`	Attribut autocomplete
`showStrength`	`boolean`	`true`	Afficher l'indicateur de force

BcOtpInput

Champ OTP (One-Time Password) avec auto-focus.

Code de verification

Entrez le code recu par SMS

vue

<BcOtpInput v-model="otpVal" label="Code de verification"
  :length="6" hint="Entrez le code recu par SMS" />

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Code OTP (v-model)
`length`	`number`	`6`	Nombre de cellules
`label`	`string`	—	Label
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`disabled`	`boolean`	`false`	Desactive
`inputMode`	`"numeric" \| "text"`	`"numeric"`	Mode de saisie
`separator`	`boolean`	`true`	Separateur entre les cellules

BcInputGroup

Champ avec prefixe et/ou suffixe (symbole monetaire, URL, etc.).

Démo interactive

Webhook URL

https://

Endpoint de reception des evenements b.connect

Email de contact

@bconnect.fr

Montant

€

Montant en euros — separateur de milliers recommande

Endpoint API

GET

Prefixe texte — URL

vue

<BcInputGroup
  v-model="groupUrl"
  label="Webhook URL"
  prefix="https://"
  hint="Endpoint de reception des evenements b.connect"
/>

Prefixe icone + suffixe texte — Email

vue

<BcInputGroup v-model="groupEmail" label="Email de contact">
  <template #prepend>
    <span class="prefix"><i class="bi bi-envelope" /></span>
  </template>
  <template #append>
    <span class="suffix">@bconnect.fr</span>
  </template>
</BcInputGroup>

Suffixe texte + alignement droite — Montant

vue

<BcInputGroup
  v-model="groupAmount"
  label="Montant"
  suffix="€"
  align="right"
  mono
  hint="Montant en euros — separateur de milliers recommande"
/>

Prefixe badge — Endpoint API

vue

<BcInputGroup v-model="groupEndpoint" label="Endpoint API" mono readonly>
  <template #prepend>
    <span class="prefix"><bc-badge variant="success" class="bc-mono">GET</bc-badge></span>
  </template>
</BcInputGroup>

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Valeur (v-model)
`label`	`string`	—	Label
`type`	`string`	`"text"`	Type HTML
`placeholder`	`string`	—	Placeholder
`hint`	`string`	—	Texte d'aide
`error`	`string`	—	Message d'erreur
`prefix`	`string`	—	Texte prefixe
`suffix`	`string`	—	Texte suffixe
`align`	`"left" \| "right"`	`"left"`	Alignement du texte
`mono`	`boolean`	`false`	Police monospace
`required`	`boolean`	`false`	Requis
`disabled`	`boolean`	`false`	Desactive

Slots

Slot	Description
`prepend`	Contenu avant le champ (remplace `prefix`)
`append`	Contenu apres le champ (remplace `suffix`)

Modificateurs et attributs utiles

Prop	Description
`prepend`	Texte ou slot a gauche
`append`	Texte ou slot a droite
`.bc-mono`	Classe utilitaire pour police monospace
`.text-right`	Alignement droite (montants)
`readonly`	Champ non editable (endpoints, tokens)

BcPasswordStrength

Indicateur visuel de robustesse de mot de passe. 4 barres colorées + label textuel. Connecter en live sur le champ BcPasswordInput.

Démo

Mot de passe

Empty

vue

<script setup>
import { ref } from 'vue'
const pwd = ref('')
</script>

<BcInput v-model="pwd" type="password" label="Mot de passe" />
<BcPasswordStrength :value="pwd" />

Niveaux de score

Score	Label	Conditions
0	Empty	Champ vide
1	Weak	Au moins 1 caractère
2	Medium	Longueur ≥ `minLength`
3	Good	Majuscule + minuscule + chiffre
4	Strong	+ caractère spécial

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Valeur du mot de passe (lier au v-model du champ)
`minLength`	`number`	`8`	Longueur minimale pour le score 2
`showLabel`	`boolean`	`true`	Affiche le label textuel (Weak / Medium / Good / Strong)

BcPhoneSelect

Sélecteur de préfixe téléphonique (indicatif pays) avec drapeau. S'utilise en combinaison avec BcPhoneInput ou un champ texte.

Démo

Pays

vue

<BcPhoneSelect
  v-model="country"
  label="Pays"
  :countries="[
    { code: '+33', label: 'France', flag: '🇫🇷' },
    { code: '+32', label: 'Belgique', flag: '🇧🇪' },
    { code: '+41', label: 'Suisse', flag: '🇨🇭' },
  ]"
/>

Type PhoneCountry

interface PhoneCountry {
  code: string      // indicatif ex. "+33"
  label: string     // nom du pays
  flag?: string     // emoji drapeau (optionnel)
  disabled?: boolean
}

Props

Prop	Type	Default	Description
`modelValue`	`string`	`""`	Code sélectionné (v-model)
`countries`	`PhoneCountry[]`	— (requis)	Liste des pays
`label`	`string`	`"Country"`	Label du champ
`disabled`	`boolean`	`false`	Désactive le select
`showFlag`	`boolean`	`true`	Affiche le drapeau dans les options
`hideFlag`	`boolean`	`false`	Force le masquage du drapeau (prioritaire sur `showFlag`)

Events

Event	Payload	Description
`update:modelValue`	`string`	Changement de code (v-model)
`change`	`string`	Changement de code

Formulaires avances ​

BcSelectSearchable ​

Props ​

BcCombobox ​

Props ​

BcDatePicker ​

Props ​

BcTimePicker ​

Props ​

BcPhoneInput ​

Props ​

BcIbanInput ​

Props ​

BcPasswordInput ​

Props ​

BcOtpInput ​

Props ​

BcInputGroup ​

Démo interactive ​

Prefixe texte — URL ​

Prefixe icone + suffixe texte — Email ​

Suffixe texte + alignement droite — Montant ​

Prefixe badge — Endpoint API ​

Props ​

Slots ​

Modificateurs et attributs utiles ​

BcPasswordStrength ​

Démo ​

Niveaux de score ​

Props ​

BcPhoneSelect ​

Démo ​

Type PhoneCountry ​

Props ​

Events ​

Formulaires avances

BcSelectSearchable

Props

BcCombobox

Props

BcDatePicker

Props

BcTimePicker

Props

BcPhoneInput

Props

BcIbanInput

Props

BcPasswordInput

Props

BcOtpInput

Props

BcInputGroup

Démo interactive

Prefixe texte — URL

Prefixe icone + suffixe texte — Email

Suffixe texte + alignement droite — Montant

Prefixe badge — Endpoint API

Props

Slots

Modificateurs et attributs utiles

BcPasswordStrength

Démo

Niveaux de score

Props

BcPhoneSelect

Démo

Type PhoneCountry

Props

Events