Formulaires

Des champs natifs habillés en noir profond : bordures fines qui prennent l'accent au focus, libellés et messages reliés automatiquement pour les lecteurs d'écran.

Champs et libellés

Placez un champ dans Field : il affiche le libellé, l'aide ou l'erreur, et transmet id, aria-describedby et aria-invalid au champ. Rien à relier à la main.

<Field label="Nom" required>
  <Input autoComplete="name" />
</Field>
<Field label="E-mail" error="Cette adresse n'est pas valide.">
  <Input type="email" defaultValue="name@" />
</Field>

Liste et zone de texte

Select est la liste native, accessible et adaptée au mobile, avec un chevron fin. Son placeholder reste en gris tant que rien n'est choisi.

<Field label="Sujet" hint="Nous répondons sous deux jours ouvrés.">
  <Select placeholder="Choisir un sujet">
    <option value="quote">Demande de devis</option>
    <option value="support">Assistance</option>
    <option value="other">Autre</option>
  </Select>
</Field>
<Field label="Message">
  <Textarea placeholder="Votre message" />
</Field>

Case et interrupteur

Les deux sont des cases à cocher natives : formulaires, clavier et lecteurs d'écran fonctionnent comme d'habitude. L'interrupteur est annoncé comme tel. Une case pour un choix envoyé avec le formulaire, un interrupteur pour un réglage qui s'applique tout de suite.

<Checkbox label="J'accepte les conditions d'utilisation" defaultChecked />
<Checkbox label="Recevoir la lettre d'information" description="Un e-mail par mois, sans publicité." />
<Switch label="Notifications" description="Être prévenu des réponses." defaultChecked />
<Switch label="Mode compact" disabled />

Champs contrôlés

Les champs transmettent tous les attributs natifs et leur ref : ils fonctionnent avec un état React, les bibliothèques de formulaires (React Hook Form, Formik) comme avec les actions serveur.

const [email, setEmail] = useState("");
const error = email && !email.includes("@") ? "Cette adresse n'est pas valide." : undefined;

<Field label="E-mail" error={error}>
  <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</Field>

Field

Input, Textarea, Select

Checkbox, Switch