# 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.

```yaml
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](/fr/docs/buckets-overview), 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.                     |

```yaml
- { 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](/fr/docs/auth-strategies).

## Pages connexes

- [Contrôles de texte et de choix](/fr/docs/form-controls) — les saisies de texte et de sélection.
- [Formulaires](/fr/docs/forms-overview) — les définitions de formulaires autonomes.
- [Téléversements de fichiers](/fr/docs/form-file-uploads) — le parcours de téléversement de bout en bout.
- [Buckets](/fr/docs/buckets-overview) — où sont stockés les fichiers téléversés.
- [Types de champs](/fr/docs/field-types-overview) — les champs de table où ces contrôles écrivent.