Formulaires ​

Les composants de formulaire de base : champs texte, textarea, recherche, select et le wrapper de champ generique.

BcInput ​

Basique ​

Votre adresse email professionnelle

vue
<BcInput v-model="email" label="Email" placeholder="nom@exemple.com"
  hint="Votre adresse email professionnelle" />
<BcInput v-model="age" label="Age" type="number" placeholder="25" />

Etats ​

Ce champ est obligatoire

vue
<BcInput label="Succes" state="success" model-value="valeur@ok.com" />
<BcInput label="Erreur" state="error" error="Ce champ est obligatoire" />
<BcInput label="Desactive" disabled model-value="Non modifiable" />

Monospace ​

Props ​

PropTypeDefaultDescription
idstringautoIdentifiant HTML
modelValuestring | number""Valeur du champ (v-model)
labelstring—Label du champ
typestring"text"Type HTML (text, email, number, etc.)
namestring—Attribut name
placeholderstring—Placeholder
hintstring—Texte d'aide sous le champ
errorstring—Message d'erreur
state"default" | "success" | "error""default"Etat visuel
requiredbooleanfalseChamp requis
disabledbooleanfalseDesactive le champ
readonlybooleanfalseLecture seule
monobooleanfalsePolice monospace
autocompletestring—Attribut autocomplete

BcTextarea ​

Maximum 500 caracteres

vue
<BcTextarea v-model="bio" label="Biographie"
  placeholder="Decrivez-vous en quelques mots..."
  hint="Maximum 500 caracteres" :rows="4" />

Etats ​

Le champ ne peut pas etre vide

Props ​

PropTypeDefaultDescription
idstringautoIdentifiant HTML
modelValuestring""Valeur (v-model)
labelstring—Label
placeholderstring—Placeholder
hintstring—Texte d'aide
errorstring—Message d'erreur
state"default" | "success" | "error""default"Etat visuel
rowsnumber4Nombre de lignes
requiredbooleanfalseRequis
disabledbooleanfalseDesactive
readonlybooleanfalseLecture seule
resize"none" | "vertical" | "both""vertical"Mode redimensionnement

BcSearchInput ​

vue
<BcSearchInput v-model="search" placeholder="Rechercher un utilisateur..." />

Props ​

PropTypeDefaultDescription
modelValuestring""Valeur de recherche (v-model)
placeholderstring"Search"Placeholder
ariaLabelstring"Search"Label ARIA
disabledbooleanfalseDesactive
clearablebooleantrueBouton de suppression
loadingbooleanfalseIndicateur de chargement

BcSelect ​

Pays de residence

vue
<script setup>
const country = ref(null)
const countries = [
  { value: 'fr', label: 'France' },
  { value: 'de', label: 'Allemagne' },
  { value: 'es', label: 'Espagne' },
]
</script>

<BcSelect v-model="country" label="Pays" :options="countries"
  placeholder="Choisir un pays..." />

Etats ​

Selection obligatoire

Props ​

PropTypeDefaultDescription
idstringautoIdentifiant HTML
modelValuestring | number | nullnullValeur selectionnee (v-model)
labelstring—Label
hintstring—Texte d'aide
errorstring—Message d'erreur
state"default" | "success" | "error""default"Etat visuel
optionsSelectOption[]—Liste d'options { value, label, disabled? }
requiredbooleanfalseRequis
disabledbooleanfalseDesactive
namestring—Attribut name
placeholderstring"Selectionner..."Texte par defaut

BcField ​

Wrapper generique pour composer des champs personnalises avec label, hint et erreur.

Ce wrapper gere le label et les messages

vue
<BcField label="Champ personnalise" hint="Gere le label et les messages" required>
  <template #default="{ id, describedBy, invalid }">
    <input :id="id" type="text" placeholder="..."
      :aria-describedby="describedBy" :aria-invalid="invalid || undefined" />
  </template>
</BcField>

Props ​

PropTypeDefaultDescription
idstringautoIdentifiant
labelstring—Label
hintstring—Texte d'aide
errorstring—Message d'erreur
requiredbooleanfalseIndicateur requis
disabledbooleanfalseEtat desactive
state"default" | "success" | "error""default"Etat visuel

Slot scope ​

ProprieteTypeDescription
idstringID a binder sur le champ
describedBystring | undefinedIDs des elements hint/error
invalidbooleantrue si etat erreur

Pattern de validation ​

Tous les composants de formulaire suivent le meme pattern d'accessibilite :

  1. Le label est lie au champ via for/id
  2. Les messages hint et error sont lies via aria-describedby
  3. L'etat erreur est signale via aria-invalid="true"
  4. Le type FormFieldState ("default" | "success" | "error") est partage entre BcInput, BcSelect et BcToggle