Contrôles de date, nombre et fichier

Six contrôles traitent les valeurs qu'une simple zone de texte gère mal : intervalles, dates, heures, nombres, fichiers et codes de vérification.

components:
  - { type: number-input, min: 1, max: 99, step: 1, props: { name: quantity } }
  - { type: date-picker, datePickerMode: range, props: { name: stay } }
  - { type: file-upload, accept: 'image/*', maxFiles: 5, dropZone: true, props: { name: photos } }

slider

Une saisie d'intervalle pour une valeur numérique ou une plage.

Propriété	Description
min / max	Bornes de l'intervalle.
step	Incrément entre valeurs sélectionnables.
showValue	Affiche la valeur courante à côté de la piste.
defaultValue	Valeur initiale, ou paire initiale pour une plage.

date-picker

Une saisie de date fondée sur un calendrier.

Propriété	Description
datePickerMode	single pour une date, range pour un début et une fin.
minDate	Date sélectionnable la plus ancienne.
maxDate	Date sélectionnable la plus récente.
dateFormat	Format d'affichage de la date choisie.

La propriété de mode est datePickerMode, pas mode — mode appartient à dataSource et serait ignoré ici.

time-picker

Une saisie d'heure.

Propriété	Description
timeFormat	12h (avec un sélecteur AM/PM) ou 24h.
minTime	Heure sélectionnable la plus tôt.
maxTime	Heure sélectionnable la plus tard.
minuteStep	Granularité du sélecteur de minutes, p. ex. 15 pour des quarts d'heure.

number-input

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

Propriété	Description
min / max	Bornes, appliquées aux valeurs saisies comme incrémentées.
step	Incrément des boutons et des flèches du clavier.
showStepper	Affiche les boutons d'incrément et de décrément.
defaultValue	Valeur initiale.

Préférez number-input à un input avec inputType: number lorsque la valeur se compte réellement — il offre des affordances clavier et pointeur qu'une zone de texte n'a pas.

file-upload

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

Propriété	Description
accept	Types MIME ou extensions autorisés, p. ex. image/*,.pdf.
maxFiles	Nombre maximal de fichiers sélectionnables en une fois.
maxFileSize	Taille maximale en octets. Les fichiers trop volumineux sont rejetés avec une erreur.
dropZone	Affiche une zone de dépôt avec un indicateur visuel.
uploadAction	Action réalisant le téléversement.
onSuccess / onError	Gestionnaires de réponse du résultat de téléversement.

Les fichiers téléversés aboutissent dans un bucket, qui est aussi l'endroit où la politique de taille et de type est réellement appliquée — accept et maxFileSize sont une courtoisie côté client, pas la frontière de sécurité.

input-otp

Une saisie segmentée de mot de passe à usage unique ou de code de vérification. Ses propriétés sont préfixées, car de simples length et type entreraient en collision avec le vocabulaire d'autres contrôles.

Propriété	Description
otpLength	Nombre de segments du code.
otpGroupSize	Segments par groupe visuel, p. ex. 3 rend 123-456.
otpSeparator	Caractère tracé entre les groupes.

- { type: input-otp, otpLength: 6, otpGroupSize: 3, otpSeparator: '-' }

input-otp s'associe à la stratégie de connexion par OTP e-mail — voir Stratégies d'authentification.

Pages connexes

• Contrôles de texte et de choix — les saisies de texte et de sélection.
• Formulaires — les définitions de formulaires autonomes.
• Téléversements de fichiers — le parcours de téléversement de bout en bout.
• Buckets — où sont stockés les fichiers téléversés.
• Types de champs — les champs de table où ces contrôles écrivent.