Form Field

Candidate

Form Field fournit la structure minimale d’une saisie accessible : label visible, input natif, aide optionnelle et message d’erreur associe.

Variants

Nom du segment

Utilise dans les destinations connectees.

Identifiant partenaire

Domaine autorise

Saisir un domaine valide, sans protocole.

Organisation

Variant	Role
Default	Saisie texte standard
Helper	Ajoute une contrainte ou un contexte court
Error	Associe erreur, border et aria-invalid
Disabled	Valeur visible mais non modifiable
Required	Ajoute l’attribut natif et un indicateur visuel

States

• default utilise la surface et border standard.
• hover renforce la border.
• focus-visible combine border et outline.
• error utilise aria-invalid et un message lie par aria-describedby.
• disabled utilise l’attribut natif et une surface distincte.

Astro

---
import FormField from '../components/ui/FormField.astro';
---

<FormField
  label="Nom du segment"
  name="segment-name"
  placeholder="Ex. Premium shoppers"
  helper="Visible uniquement par votre organisation."
  required
/>

HTML output

<div class="pixel-field">
  <label for="field-segment-name">Nom du segment <span>*</span></label>
  <input
    id="field-segment-name"
    name="segment-name"
    required
    aria-describedby="field-segment-name-message"
  />
  <p id="field-segment-name-message">Visible uniquement par votre organisation.</p>
</div>

Tokens

--input-background-*, --input-border-*, --input-text-*, --input-label, --input-helper, --input-error, --input-focus-ring, --input-height, --input-padding-*, --input-radius, --input-gap.

Do / Don’t

Do	Don’t
Afficher un label permanent.	Utiliser le placeholder comme seul label.
Expliquer comment corriger une erreur.	Afficher uniquement Valeur invalide.
Garder helper et erreur courts.	Placer un paragraphe marketing sous un input.
Utiliser le bon type HTML.	Utiliser type="text" pour email, URL ou nombre.
Conserver les associations for, id et aria-describedby.	Associer visuellement les elements sans relation HTML.

Accessibility

Form Field utilise un label natif et relie le message contextuel avec aria-describedby. Une erreur active aria-invalid. Le composant ne remplace pas la validation serveur ni l’annonce dynamique des erreurs apres soumission.