Aide formulaire (BcField · BcHelpPanel)

Système d'aide contextuelle en deux niveaux : tooltip inline sur un champ, et panneau d'aide latéral pour les formulaires complexes.

Niveau 1 — Tooltip inline (prop `help`)

Icône ? bleue à droite du label. Survol ou focus → tooltip sombre avec contenu riche.

html

<BcField label="SIREN" required
  help="Identifiant unique à 9 chiffres attribué par l'INSEE.
        Format : 3 groupes de 3 chiffres séparés par des espaces." />

<BcField label="Code partenaire" required
  help="Le code partenaire doit rester unique dans toute la plateforme." />

Note : L'icône ? est intentionnellement bleue — couleur sémantique "info". Elle ne doit jamais être confondue avec une erreur (rouge --bc-danger).

Niveau 2 — Layout formulaire + aide latérale

Pour les formulaires complexes nécessitant des explications étendues. Layout 60% formulaire / 40% aide latérale — construit avec flexbox et BcHelpPanel.

Titulaire

IBAN

BIC

Implémentation

vue

<div style="display: flex; gap: 24px; align-items: flex-start;">
  <!-- Formulaire (60%) -->
  <div style="flex: 3;">
    <BcField label="IBAN" required help="Format FR76 XXXX...">
      <bc-input placeholder="FR76 3000 6000 0112 3456 7890 189" />
    </BcField>
  </div>

  <!-- Aide latérale (40%) -->
  <div style="flex: 2;">
    <BcHelpPanel
      title="IBAN de règlement"
      description="L'IBAN est votre numéro de compte international, utilisé pour les virements SEPA."
    >
      <!-- Tip callout avec fond bleu -->
      <div class="bc-help-panel-tip">
        💡 Le BIC est déduit automatiquement pour la majorité des banques françaises.
      </div>
    </BcHelpPanel>
  </div>
</div>

Props — BcField (prop help)

Prop	Type	Description
`label`	`String`	Label du champ
`required`	`Boolean`	Affiche l'astérisque requis
`help`	`String`	Texte du tooltip d'aide (icône ? bleue)

Props — BcHelpPanel

Prop	Type	Description
`title`	`String`	Titre du panneau d'aide
`description`	`String`	Texte de description principal
`linkHref`	`String`	URL du lien "en savoir plus" (optionnel)
`linkLabel`	`String`	Libellé du lien (optionnel)
`#default`	Slot	Contenu additionnel (ex: `.bc-help-panel-tip`)

Tip callout

Bloc conseil à fond bleu, à placer dans le slot #default de BcHelpPanel :

html

<div class="bc-help-panel-tip">
  💡 Conseil ou astuce contextuelle
</div>

Règles d'utilisation

Choisir le bon niveau d'aide :

Situation	Solution
Clarification courte (< 2 lignes)	`prop help` sur BcField
Formulaire complexe avec plusieurs champs sensibles	Layout flex + `BcHelpPanel`
Conseil ou astuce de productivité	`<div class="bc-help-panel-tip">` dans BcHelpPanel

Couleurs :

Icône ? → bleue (--bc-info) = information neutre
Jamais rouge — le rouge est réservé aux erreurs de validation

Aide formulaire (BcField · BcHelpPanel) ​

Niveau 1 — Tooltip inline (prop help) ​

Niveau 2 — Layout formulaire + aide latérale ​

Implémentation ​

Props — BcField (prop help) ​

Props — BcHelpPanel ​

Tip callout ​

Règles d'utilisation ​