Formulaires

Texte éditable en place

stableClasses hb-editable hb-editable-group hb-editable-group--multiline hb-editable-hint hb-inline hb-inline-title hb-inline-desc

Deux niveaux

hb-editable : le titre et la description d'une fiche (bandeau d'une check-list). Au repos, filet pointillé et crayon posé dans le champ à droite ; au survol, filet plein et fond ; au focus, couleur métier, le crayon disparaît. L'appelant borne la largeur (max-width sur le groupe), sinon le champ s'étire sur toute la page.
hb-inline : le titre et la description d'une ligne de liste de tâches. Nu au repos ; au survol de la ligne, seul le texte sous le pointeur prend la forme d'un champ ; couleur métier au focus.

Code

<div class="hb-card-banner hb-stack" style="max-width:560px;gap:var(--space-1)">
  <div class="hb-editable-group"><input class="hb-editable" value="Check-list du 06/11/2026" aria-label="Titre" style="font:var(--text-h1);font-size:24px;line-height:32px;color:var(--brand)"><i class="material-icons hb-editable-hint">edit</i></div>
  <div class="hb-editable-group hb-editable-group--multiline"><textarea class="hb-editable" rows="1" placeholder="Ajouter une description" aria-label="Description"></textarea><i class="material-icons hb-editable-hint">edit</i></div>
  <div class="hb-editable-group"><input class="hb-editable" value="Archivée : lecture seule" aria-label="Titre" disabled><i class="material-icons hb-editable-hint">edit</i></div>
</div>
<div class="hb-list" style="max-width:560px">
  <div class="hb-list-row"><span class="hb-list-handle"><i class="material-icons">drag_indicator</i></span><input type="checkbox" class="hb-check hb-list-check" aria-label="Faite"><div class="hb-list-body"><input class="hb-inline hb-inline-title" value="Vérifier les DLC du libre-service" aria-label="Titre"><textarea class="hb-inline hb-inline-desc" rows="1" aria-label="Description">Retirer les produits à J-1 et noter les retraits.</textarea></div></div>
</div>

Règles

L'enregistrement se fait à la perte de focus ou à Entrée (@change), pas à chaque frappe ; Échap restaure la valeur.
Un texte éditable désactivé (fiche archivée) perd son filet et son crayon : il redevient du texte.
Le placeholder est en italique et dit ce qu'on peut écrire (« Ajouter une description »), jamais la valeur attendue.