L'entrée de sélection utilise l'entrée de sélection native HTML. Les entrées de sélection peuvent être des sélections à valeur unique ou des sélections à valeurs multiples en utilisant l'attribut multiple. Il existe 4 façons de fournir des options à une entrée de sélection :
label et value (identique aux entrées checkbox et radio)<option> directement dans le slot default.Besoin de plus de flexibilité que l'entrée select HTML native ? Découvrez l'entrée dropdown disponible dans FormKit Pro.
Les listes de sélection sont le plus souvent utilisées pour sélectionner un seul élément dans une liste d'options.
La manière la plus simple de fournir des options est un tableau de chaînes de caractères. Les chaînes fournies seront utilisées à la fois pour l'étiquette et la valeur de l'option.
Vous pouvez également fournir la prop options où les clés sont des valeurs et les valeurs de chaque propriété sont des étiquettes.
La manière la plus flexible de définir des options est de fournir un tableau d'objets. Les objets doivent inclure des propriétés value et label — mais peuvent également inclure une propriété help ainsi qu'un objet attrs d'attributs supplémentaires à appliquer à chaque balise d'entrée de sélection.
Pour passer des attributs supplémentaires à chaque élément <option>, votre objet peut également contenir une propriété attrs.
{
label: 'Mon étiquette',
value: 'a-value',
attrs: {
disabled: true
}
}
Parfois, il peut être souhaitable de générer manuellement le contenu d'une liste de sélection afin de créer des structures spécialisées. Cela peut être fait en utilisant le slot default pour afficher explicitement vos options.
Lorsque vous utilisez le slot par défaut pour afficher les options, vous ne devez pas utiliser les props placeholder ou options.
L'entrée select prend également en charge un attribut multiple qui permet une sélection multiple. Lorsqu'il est utilisé avec FormKit, cette option produit un tableau de valeurs.
Les entrées de sélection avec l'attribut multiple peuvent être difficiles pour certains utilisateurs car elles nécessitent de maintenir enfoncées les touches de contrôle ou de commande pour effectuer plusieurs sélections. En fonction de votre public, vous pouvez envisager d'utiliser une entrée de case à cocher avec options à la place.
Lors de l'utilisation de l'emplacement par défaut en conjonction avec l'attribut multiple, vous devez attribuer explicitement l'attribut selected à chaque option.
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| options | Array/Object | [] | Un objet de paires valeur/label ou un tableau de chaînes, ou un tableau d'objets qui doivent contenir une propriété label et valeur. |
| placeholder | String | none | Lorsqu'il est défini, FormKit injecte une balise option cachée non sélectionnable en tant que première valeur de la liste pour servir de placeholder. |
| select-icon | String | ’’ | Spécifie une icône à placer dans la section selectIcon. Par défaut, il s'agit de l'icône select. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
Vous pouvez cibler une section spécifique d'une entrée en utilisant la "key" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema) ou le contenu (via des emplacements)). En savoir plus sur les sections ici.
| Section-key | Description |
|---|---|
| option | Responsable du rendu de chaque option. Le contexte comprend une propriété option avec l'option en cours de rendu. Cet objet comprend des propriétés label et value. |
| selectIcon | Un élément pour afficher une icône pour ouvrir la liste de sélection. Généralement une flèche vers le bas. |
| Afficher Universel section keys | |
| outer | L'élément d'enrobage le plus externe. |
| wrapper | Un enrobage autour de l'étiquette et de l'entrée. |
| label | L'étiquette de l'entrée. |
| prefix | N'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée. |
| prefixIcon | Un élément pour afficher une icône avant la section de préfixe. |
| inner | Un enrobage autour de l'élément d'entrée réel. |
| suffix | N'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée. |
| suffixIcon | Un élément pour afficher une icône après la section de suffixe. |
| input | L'élément d'entrée lui-même. |
| help | L'élément contenant le texte d'aide. |
| messages | Un enrobage autour de tous les messages. |
| message | L'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur. |