Contrôles de texte et de choix

Les contrôles de formulaire sont les saisies individuelles dont un formulaire est composé. Ils se placent à l'intérieur d'un form ou d'un data-form, ou seuls dans n'importe quel conteneur.

- type: form
  action: { type: crud, operation: create, table: signups }
  children:
    - { type: input, inputType: email, props: { name: email } }
    - { type: select, options: [{ label: Free, value: free }], props: { name: plan } }
    - { type: switch, checked: true, props: { name: subscribe } }

input

Une saisie de texte sur une ligne. Le type HTML est la propriété de schéma inputType — et non props.type.

Placeholder, valeur par défaut, désactivation et obligation transitent tous par props.

textarea

Une saisie de texte multiligne.

select

Une liste déroulante affichant la valeur choisie et ouvrant la liste des options au clic.

Une option vaut { label, value, disabled, icon } ; label et value sont obligatoires.

Des options issues d'une table

Plutôt que d'énumérer les choix à la main, liez le select à une table : chaque ligne devient une option.

- type: select
  dataSource:
    table: categories
    displayField: name # obligatoire — le champ affiché à l'utilisateur
    valueField: slug # facultatif — id par défaut
    sort: [{ field: name, direction: asc }]
    filter: [{ field: archived, operator: eq, value: false }]
    limit: 50
  props: { id: category-filter, label: Filtrer par catégorie }

options et dataSource sont mutuellement exclusifs : les deux répondent à la même question — quels sont les choix — donc les déclarer ensemble est refusé au démarrage. displayField n'a volontairement pas de valeur par défaut : deviner produirait en silence une liste de lignes vides sur toute table qui ne correspondrait pas.

Les lignes sont lues côté serveur, avant l'envoi de la page : les choix sont donc présents dans la première réponse — pas de clignotement à l'arrivée, et les robots les voient. Cela signifie aussi que la permission de lecture de la table conditionne la liaison : un visiteur qui n'a pas le droit de lire la table obtient une liste vide, et aucune valeur de ses lignes n'atteint la page. Les filtres acceptent les références $currentUser.*, résolues à chaque requête : une liste d'options propre à l'utilisateur est donc une liaison prise en charge.

Comme la liste entière est rendue dans la page, limit la plafonne à 1000. Un sélecteur sur une table plus grande est un autre contrôle — un contrôle qui interroge la table à la frappe au lieu de l'y insérer — et ne s'exprime pas ici.

combobox

S'exprime désormais avec select et searchable: true, qui accepte les mêmes searchPlaceholder et allowCustomValue.

checkbox

radio-group

Un ensemble d'options mutuellement exclusives.

switch

Un interrupteur marche/arrêt doté du rôle d'accessibilité adéquat. Accepte checked.

Utilisez switch quand le changement prend effet immédiatement, et checkbox quand il prend effet à la soumission — les deux se ressemblent et se lisent très différemment pour qui décide s'il doit appuyer sur Enregistrer.

toggle / toggle-group

toggle est un bouton pressable unique qui reste enfoncé. toggle-group en regroupe plusieurs.

field

Un encadrant qui rend un libellé, un contrôle, une description et un message d'erreur comme un ensemble accessible unique. C'est le seul contrôle de formulaire qui accepte children.

- type: field
  fieldLabel: 'Email'
  fieldDescription: "We'll never share it."
  required: true
  children:
    - { type: input, inputType: email, props: { name: email } }

slider

Déplacé vers Contrôles de date, nombre et fichier.

date-picker

Déplacé vers Contrôles de date, nombre et fichier.

time-picker

Déplacé vers Contrôles de date, nombre et fichier.

number-input

Déplacé vers Contrôles de date, nombre et fichier.

file-upload

Déplacé vers Contrôles de date, nombre et fichier.

Pages connexes

• Contrôles de date, nombre et fichier — les autres saisies.
• Tables et listes — data-form, la façon validée de nommer les champs.
• Formulaires — les définitions de formulaires autonomes.
• Le modèle de composants — l'ensemble props employé par ces contrôles.
• Types de champs — les champs de table où les formulaires écrivent.