Composants

TextField

Le champ de saisie sur une ligne. Enrobe le TextInput d'Astryx sous l'API Forme, avec un libellé a11y obligatoire, les modes contrôlé/non-contrôlé et le support des montants alignés à droite en chiffres tabulaires.

label est obligatoire mais masqué par défaut (isLabelHidden vaut true). Passe isLabelHidden= pour l'afficher.

import { TextField } from "@forme-ch/ui/controls";

const [value, setValue] = useState("");

<TextField
  label="Nom du client"
  isLabelHidden={false}
  value={value}
  onChange={setValue}
  placeholder="ex. Café des Alpes SA"
  description="Raison sociale telle qu'elle apparaîtra sur la facture."
  hasClear
/>

Types

Trois types natifs : text, email et password.

<TextField label="E-mail" isLabelHidden={false} type="email" inputMode="email" />
<TextField label="Mot de passe" isLabelHidden={false} type="password" />

Montants alignés

Pour les colonnes de nombres, combine align="right" et isNumeric (chiffres tabulaires) avec un inputMode="decimal".

<TextField
  label="Montant (CHF)"
  isLabelHidden={false}
  align="right"
  isNumeric
  inputMode="decimal"
  step="0.05"
/>

États

<TextField label="Requis" isLabelHidden={false} isRequired />
<TextField label="Optionnel" isLabelHidden={false} isOptional />
<TextField label="Lecture seule" isLabelHidden={false} isReadOnly />
<TextField label="Désactivé" isLabelHidden={false} isDisabled />

Props

Prop	Type	Défaut	Description
`label` *	`string`	—	Libellé a11y obligatoire. Masqué visuellement si `isLabelHidden`.
`isLabelHidden`	`boolean`	`true`	Masque le libellé visuel (l'a11y reste). Passe `false` pour un label visible.
`name`	`string`	—	Nom du champ porté dans un `<form>` (mappé sur `htmlName`).
`type`	`"text" \| "password" \| "email"`	`"text"`	Type du champ.
`value`	`string`	—	Mode contrôlé.
`defaultValue`	`string`	—	Mode non-contrôlé.
`onChange`	`(value: string) => void`	—	Callback (mode contrôlé).
`placeholder`	`string`	—	Texte indicatif.
`description`	`string`	—	Aide sous le champ.
`isDisabled`	`boolean`	—	Désactive le champ.
`isReadOnly`	`boolean`	—	Lecture seule (valeur sélectionnable, non éditable).
`isRequired`	`boolean`	—	Marque le champ requis.
`isOptional`	`boolean`	—	Marque explicitement le champ facultatif.
`hasClear`	`boolean`	—	Bouton d'effacement natif.
`hasAutoFocus`	`boolean`	—	Focus au montage.
`autoComplete`	`string`	—	Attribut `autocomplete` natif.
`startIcon`	`ReactNode`	—	Icône en tête de champ.
`size`	`"sm" \| "md" \| "lg"`	—	Hauteur du champ.
`width`	`number \| string`	—	Largeur du champ.
`align`	`"left" \| "right"`	`"left"`	Alignement du texte. `right` pour montants/quantités.
`isNumeric`	`boolean`	—	Chiffres tabulaires (colonnes de nombres alignées). Se combine avec `align="right"`.
`maxLength`	`number`	—	Validation native (posée sur l'`<input>` DOM).
`minLength`	`number`	—	Validation native.
`min`	`number \| string`	—	Validation native.
`max`	`number \| string`	—	Validation native.
`step`	`number \| string`	—	Validation native.
`inputMode`	`"none" \| "text" \| "decimal" \| "numeric" \| "tel" \| "search" \| "email" \| "url"`	—	Clavier mobile adapté.
`list`	`string`	—	id d'un `<datalist>` pour l'autocomplétion native.
`onEnter`	`() => void`	—	Callback sur la touche Entrée.
`onKeyDown`	`(e: KeyboardEvent) => void`	—	Gestionnaire clavier bas niveau.

Accepte aussi className et style.

Accessibilité

Chaque champ a un nom accessible via label. Un champ sans libellé n'est pas conforme — même masqué, le libellé reste lu par les lecteurs d'écran. Utilise description pour l'aide contextuelle (rattachée au champ), et isRequired / isOptional pour signaler l'obligation. Les attributs de validation (maxLength, min, max…) sont posés sur l'<input> DOM natif.

Do & Don't

✓ À faire

Un label clair sur chaque champ. align="right" + isNumeric pour les montants.

✕ À éviter

Utiliser le placeholder comme seul libellé. Oublier isLabelHidden= quand le label doit être visible.