Field
Le champ, et tout ce qui l'entoure.
Un libellé, un contrôle, un message d'erreur, et les attributs qui les relient — id, aria-describedby, aria-invalid. Ce câblage est toujours le même et toujours oublié quelque part : ici il est fait une fois.
type choisit le contrôle parmi les vingt-sept que la bibliothèque fournit. Le champ ne les réimplémente pas : il les monte et leur passe le branchement.
Installation
bash
sia-ui add fieldOu par le paquet, sans rien copier :
tsx
import { Field } from "@sia-ui/react-web";Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
className | string | — | |
controlLabel | ReactNode | — | |
controlProps | any | — | Réglages du contrôle que type choisit — searchable d'un Select, maxLength d'un Input, accept d'un FileUpload. Pour radio, ils vont au RadioGroup. Appliqués sous ce que le champ pilote : valeur, changement, nom, identifiant, options, texte indicatif et désactivation gardent leurs props dédiées. Ignorés quand le contrôle est fourni en children. |
defaultValue | any | — | |
description | ReactNode | — | |
disabled | boolean | — | |
error | ReactNode | — | |
field | FieldBindingLike | — | Le branchement d'un formulaire, en une prop. <Field label="Courriel" field={form.bind("email")} /> : nom, valeur, changement, sortie de champ et message d'erreur arrivent ensemble. Le champ ne sait pas d'où vient l'objet — useLocalForm, un adaptateur react-hook-form, ou trois useState. C'est tout l'intérêt du contrat : aucune bibliothèque de formulaires n'est importée ici. Les props écrites explicitement l'emportent, pour corriger un cas isolé sans démonter le branchement. |
helpText | ReactNode | — | |
htmlFor | string | — | |
label | ReactNode | — | |
message | ReactNode | — | |
name | string | — | |
onBlur | () => void | — | Appelé quand le champ est quitté. Déclenche la validation « au blur ». |
onValueChange | (value: any) => void | — | |
optional | boolean | — | |
optionalLabel | ReactNode | — | La mention des champs facultatifs. Par défaut, optional de la locale. |
options | SelectOption[] | — | |
orientation | "horizontal" | "vertical" | — | |
placeholder | string | — | |
referenceOptions | ReferenceOption[] | — | |
required | boolean | — | |
status | "error" | "default" | "success" | "warning" | — | |
success | ReactNode | — | |
type | FieldType | — | |
value | any | — | |
warning | ReactNode | — |
Voir aussi
- Le composant dans le catalogue — états, variantes, et bac à sable.
- La référence complète — tous les composants.