# 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`). ```yaml 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é. | ```yaml - type: field fieldLabel: 'Email' fieldDescription: "We'll never share it." props: { required: true } children: - { type: input, name: email, props: { type: email } } ``` ## Pages connexes - [Présentation des pages](/fr/docs/pages-overview) — le modèle de composants et les actions. - [Formulaires](/fr/docs/forms-overview) — définitions de formulaires autonomes et cibles de soumission. - [Composants de données](/fr/docs/data-components) — `data-form` pour les formulaires adossés à des enregistrements. - [Composants de superposition](/fr/docs/overlay-components) — dialogues et tiroirs hébergeant des formulaires. - [Présentation des types de champs](/fr/docs/field-types-overview) — les types de champs de table dans lesquels les formulaires écrivent.