Skip to main content
View as Markdown

Contrôles de formulaire

Les contrôles de formulaire sont les composants de saisie individuels qui composent un formulaire. Ils rendent les saisies interactives standard — texte, sélection, bascules, curseurs, sélecteurs, téléversements de fichiers — et s'intègrent à un form/data-form parent pour la soumission. Chaque contrôle accepte l'ensemble partagé props ainsi que les modules visibility, responsive et i18n. La plupart des contrôles partagent un ensemble commun d'attributs (name, label, placeholder, disabled, required, defaultValue).

components:
  - type: form
    action: { type: crud, operation: create }
    children:
      - { type: input, name: email, props: { type: email, placeholder: 'you@example.com' } }
      - {
          type: select,
          name: plan,
          options: [{ label: Free, value: free }, { label: Pro, value: pro }],
        }
      - { type: switch, name: subscribe, props: { checked: true } }

input

Une saisie de texte sur une seule ligne.

Propriété Description
name Nom du champ (clé dans la charge utile soumise).
props.type Type d'entrée HTML : text, email, password, number, tel, url, search.
props.placeholder Texte indicatif.
props.defaultValue Valeur initiale.
props.disabled Désactiver la saisie.
props.required Marquer le champ comme requis.

textarea

Une saisie de texte multiligne.

Propriété Description
name Nom du champ.
props.rows Nombre visible de lignes de texte.
props.maxLength Nombre maximal de caractères (empêche la saisie au-delà de la limite).
props.autoResize Définir sur true pour étendre la hauteur à mesure que le contenu grandit.
props.placeholder Texte indicatif.

select

Une liste déroulante qui affiche la valeur sélectionnée et ouvre une liste d'options au clic.

Propriété Description
name Nom du champ.
options Tableau de { label, value, disabled?, icon? } (au moins un requis).
props.placeholder Texte affiché quand aucune valeur n'est sélectionnée.
props.searchable Définir sur true pour activer le filtrage anticipé des options.
props.defaultValue Valeur présélectionnée.

combobox

Une sélection consultable et à complétion automatique pour de grands ensembles d'options.

Propriété Description
name Nom du champ.
options Tableau d'options { label, value } (filtrées par la requête saisie).
props.placeholder Texte indicatif pour le champ de recherche.
props.defaultValue Valeur présélectionnée.

checkbox

Une saisie de case à cocher unique.

Propriété Description
name Nom du champ.
props.checked Rendre à l'état coché.
props.indeterminate Rendre avec un indicateur tiret (état mixte).
props.disabled Désactiver le basculement.

radio-group

Un groupe d'options radio mutuellement exclusives.

Propriété Description
name Nom du champ.
options Tableau d'options { label, value, disabled? }.
props.defaultValue Option présélectionnée.
props.orientation Disposition horizontal ou vertical.

switch

Un interrupteur à bascule marche/arrêt avec un rôle accessible.

Propriété Description
name Nom du champ.
props.checked Rendre en position marche.
props.disabled Désactiver le basculement.

toggle / toggle-group

toggle est un bouton bascule unique pressable. toggle-group regroupe plusieurs bascules avec un comportement de sélection unique ou multiple.

Propriété Description
name Nom du champ (toggle-group).
props.type single ou multiple (selon qu'une ou plusieurs bascules peuvent être actives).
props.orientation horizontal ou vertical (toggle-group).
options Options de bascule (toggle-group).

slider

Une saisie de plage pour sélectionner une valeur ou une plage numérique.

Propriété Description
name Nom du champ.
props.min Valeur minimale.
props.max Valeur maximale.
props.step Incrément de pas.
props.defaultValue Valeur ou plage initiale.

date-picker

Une saisie de date basée sur un calendrier.

Propriété Description
name Nom du champ.
props.mode single (une date) ou range (une plage de dates).
props.min Date sélectionnable la plus précoce.
props.max Date sélectionnable la plus tardive.

time-picker

Une saisie d'heure acceptant des valeurs d'heure saisies par l'utilisateur.

Propriété Description
name Nom du champ.
props.timeFormat 12h (affiche un sélecteur AM/PM) ou 24h.
props.minTime Heure sélectionnable la plus précoce.
props.maxTime Heure sélectionnable la plus tardive.

number-input

Une saisie numérique avec boutons d'incrémentation.

Propriété Description
name Nom du champ.
props.min Valeur minimale (contraint les valeurs saisies et incrémentées).
props.max Valeur maximale.
props.step Quantité d'incrément pour les boutons d'incrémentation et les flèches du clavier.

file-upload

Un sélecteur de fichiers avec glisser-déposer optionnel.

Propriété Description
name Nom du champ.
props.accept Types MIME/extensions autorisés (p. ex. image/*,.pdf).
props.maxFiles Nombre maximal de fichiers pouvant être sélectionnés.
props.maxFileSize Taille maximale en octets (les fichiers trop volumineux sont rejetés avec une erreur).
props.dropZone Définir sur true pour rendre une zone de glisser-déposer avec un indicateur de dépôt visuel.

input-otp

Une saisie segmentée de mot de passe à usage unique / code de vérification.

Propriété Description
name Nom du champ.
props.length Nombre de chiffres/segments du code.
props.type Caractères autorisés (p. ex. numérique).

field

Un encadreur de champ de formulaire composé qui rend un libellé, un contrôle, une description et un message d'erreur comme une seule unité accessible.

Propriété Description
fieldLabel Élément de libellé associé au contrôle enfant.
fieldDescription Texte d'aide rendu sous le contrôle.
fieldError Message d'erreur rendu dans la couleur destructive sous le contrôle.
props.required Afficher un indicateur de champ requis (astérisque) sur le libellé.
children Le composant de contrôle encadré, qui reçoit le contexte de champ composé. 
- type: field
  fieldLabel: 'Email'
  fieldDescription: "We'll never share it."
  props: { required: true }
  children:
    - { type: input, name: email, props: { type: email } }

Pages connexes