Champ
حقلField
Stable
src/dsm/components/field.tsxLe champ associe une étiquette, une aide et un message d'erreur à un contrôle de saisie (Input, Select, Textarea…). Il gère l'astérisque d'obligation, la mention « facultatif » et le lien accessible entre le libellé, l'aide et l'erreur. `Fieldset` fait le même travail pour un groupe de contrôles derrière une légende native.
Import
import { Field } from "@/dsm/components/field";Exemples
Champ simple
Un `Input` étiqueté, avec aide et astérisque d'obligation.
LTR
Tel qu'il apparaît sur votre carte d'identité nationale.
États
Champ facultatif, champ en erreur et champ désactivé.
LTR
Ce numéro doit contenir 8 chiffres.
Utilisée pour orienter votre dossier vers le bon guichet.
Formulaire complet
Une demande d'extrait d'acte de naissance combinant Field, Input, Select, RadioGroup, Checkbox, DateInput et FileUpload.
LTR
Usage
Quand l'utiliser
- Enveloppez tout contrôle de saisie unique (Input, Select, Textarea, PasswordInput) dans `Field` pour obtenir gratuitement le libellé, l'aide et l'erreur alignés.
- Passez `required` pour les champs obligatoires — l'astérisque est visuel, le mot « obligatoire » est annoncé aux lecteurs d'écran.
- Utilisez `Fieldset` pour regrouper plusieurs contrôles sous une légende unique (utilisé en interne par `RadioGroup` et `CheckboxGroup`).
Quand ne pas l'utiliser
- N'utilisez pas `Field` pour un interrupteur ou une case seule : `Switch` et `Checkbox` portent déjà leur propre libellé collé au contrôle.
- Ne dupliquez pas le message d'erreur dans le `hint` : l'erreur remplace l'aide dans le flux de lecture, elle ne s'y ajoute pas visuellement.
Accessibilité & langues
Accessibilité
- Le contrôle enfant reçoit automatiquement `id`, `aria-invalid` et `aria-describedby` (aide + erreur) : aucune prop à répéter manuellement.
- Le message d'erreur porte `role="alert"` et une icône `CircleAlert`, pour ne jamais reposer uniquement sur la couleur.
- `FieldLabel`, `FieldHint` et `FieldError` restent disponibles séparément pour composer une mise en page personnalisée sans perdre les mêmes garanties.
RTL & multilingue
- L'astérisque d'obligation et l'aide suivent le sens de lecture par défaut du navigateur ; aucune classe directionnelle n'est nécessaire.
- `Fieldset` utilise une `<legend>` native, qui s'aligne au début de lecture automatiquement en arabe.
Propriétés
Field
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| label* | ReactNode | — | Libellé du champ, toujours visible. |
| hint | ReactNode | — | Texte d'aide affiché avant le contrôle. |
| error | ReactNode | — | Message d'erreur affiché après le contrôle ; bascule aussi `aria-invalid` et le style invalide du contrôle. |
| required | boolean | — | Ajoute l'astérisque visuel et le mot « obligatoire » lu par les lecteurs d'écran. |
| optional | boolean | — | Ajoute la mention « (facultatif) » à côté du libellé. |
| id | string | — | Identifiant du contrôle ; généré automatiquement si absent. |
| children* | ReactElement | — | Le contrôle unique à étiqueter (Input, Select, Textarea…). |
Fieldset
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| legend* | ReactNode | — | Légende du groupe, stylée comme un libellé. |
| hint | ReactNode | — | Texte d'aide affiché sous la légende. |
| error | ReactNode | — | Message d'erreur affiché après les contrôles du groupe. |
| children* | ReactNode | — | Les contrôles du groupe. |
FieldLabel / FieldHint / FieldError
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| required / optional | boolean | — | Sur `FieldLabel` uniquement : astérisque ou mention facultative. |
| children* | ReactNode | — | Contenu du libellé, de l'aide ou de l'erreur, pour une mise en page personnalisée. |