Pour afficher plusieurs boutons bascule, utilisez la propriété options. Les options peuvent être spécifiées de 3 manières :
label et value (comme pour les entrées select et radio).
disabled, help, onLabel et/ou offLabel pour chaque option.Par défaut, l'entrée togglebuttons ne permet de sélectionner qu'une seule option. Vous pouvez changer ce comportement en définissant la propriété multiple qui permettra alors la sélection de plusieurs options :
Par défaut, togglebuttons vous permet de sélectionner et de désélectionner, autorisant ainsi un état désactivé. Avec la propriété enforced activée, une fois qu'un utilisateur a interagi avec l'entrée, une valeur sera toujours définie, un peu comme celle d'une entrée radio.
En supposant que vous utilisez les styles FormKit par défaut, la propriété vertical applique des attributs de dataset et un style pour empiler les boutons bascule dans une orientation verticale.
Plus d'exemples de propriétés et de combinaisons :
L'entrée togglebuttons offre des choix entre une ou plusieurs valeurs ; c'est une excellente option lorsque vous souhaitez que l'utilisateur active ou désactive une fonctionnalité, choisisse entre des options ou autorise plusieurs sélections.
Les valeurs pour les boutons bascule sont undefined si non-interagi, true si coché, et false si décoché. Vous pouvez changer ces valeurs en passant les propriétés onValue et offValue. Dans cet exemple, nous allons définir onValue à la chaîne 'active' et offValue à la chaîne 'inactive' :
De plus, vous pouvez spécifier des étiquettes secondaires en définissant les propriétés on-label et off-label. Ces valeurs sont affichées conditionnellement en fonction de l'état activé/désactivé du basculeur. Les étiquettes de valeur se rendent à droite de l'entrée du basculeur. L'"étiquette principale" sera déplacée à la position de l'étiquette d'entrée au-dessus du basculeur lorsque des étiquettes de valeur sont utilisées :
Pour plusieurs options, vous pouvez utiliser le slot default pour définir le contenu du basculeur.
Pour un seul basculeur, vous pouvez utiliser le slot par défaut pour définir le contenu du basculeur. Les slots on et off sont également disponibles pour changer le contenu en fonction de l'activation ou non du basculeur.
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| off-value | any | false | La valeur lorsque le basculeur n'est pas coché. À utiliser uniquement avec des boutons basculeurs indépendants. |
| on-value | any | true | La valeur lorsque le basculeur est coché. À utiliser uniquement avec des boutons basculeurs indépendants. |
| off-label | String | undefined | Le texte de l'étiquette du bouton lorsque le basculeur n'est pas coché. À utiliser uniquement avec des boutons basculeurs indépendants. |
| on-label | String | undefined | Le texte de l'étiquette du bouton lorsque le basculeur est coché. À utiliser uniquement avec des boutons basculeurs indépendants. |
| options | Array/Object | [] | Un objet de paires valeur/étiquette ou un tableau de chaînes de caractères, ou un tableau d'objets qui doivent contenir une propriété d'étiquette et de valeur. Les propriétés supplémentaires incluent : disabled, help, onLabel et offLabel |
| multiple | Boolean | false | Permet de sélectionner plusieurs options. À utiliser uniquement avec plusieurs boutons basculeurs. |
| enforced | Boolean | false | Assure qu'au moins une sélection reste choisie une fois le champ activé. À utiliser uniquement avec plusieurs boutons basculeurs. |
| vertical | Boolean | false | Applique des attributs de données et un style pour empiler les boutons basculeurs dans une orientation verticale. À utiliser uniquement avec plusieurs boutons basculeurs. |
| 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.. |
Les boutons à bascule ont une construction différente selon qu'il s'agit d'une configuration unique ou multiple.
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 |
|---|---|
| singleToggle | Enveloppe du bouton pour le bouton à bascule unique |
| multiToggle | Enveloppe du bouton pour un bouton à bascule lorsque plusieurs boutons à bascule existent |
| inputInner | Texte intérieur du bouton pour un bouton à bascule |
| option | Responsable de l'enveloppe autour de chaque élément dans les options. |
| options | Responsable de l'élément enveloppe autour de tous les éléments d'option. |
| 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. |
Tous les champs de saisie FormKit sont conçus en tenant compte des considérations d'accessibilité suivantes. Aidez-nous à améliorer continuellement l'accessibilité pour tous en signalant les problèmes d'accessibilité ici :
| Clé de Section | Attribut | Par défaut | Description |
|---|---|---|---|
| singleToggle | aria-label | Fournit un nom accessible. | |
| aria-pressed | Indique l'état enfoncé du bouton bascule. | ||
| role | checkbox | Indique aux technologies d'assistance que cet élément fonctionne comme une case à cocher. | |
| Afficher Universel clé de section | |||
| label | label | for | Associe cela à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| input | input | disabled | Désactive un élément HTML, empêchant l'interaction de l'utilisateur et signalant un état non interactif |
| aria-describedby | Améliore l'accessibilité en associant un élément à une description, facilitant la lecture par les lecteurs d'écran | ||
| aria-required | Ajoute l'état requis lorsque la validation est requise. | ||
| icon | icon | for | Chaque fois qu'une icône est définie comme libellé, elle la relie à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| Clé de Section | Attribut | Par défaut | Description |
|---|---|---|---|
| multiToggle | aria-label | Fournit un nom accessible. | |
| aria-pressed | Indique l'état enfoncé du bouton bascule. | ||
| role | checkbox or radio | Indique aux technologies d'assistance que cet élément fonctionne comme une case à cocher s'il a des options ou comme un bouton radio sinon. | |
| options | role | group | Indique aux technologies d'assistance que cet élément fonctionne comme un groupe. |
| aria-labelledby | Associe cet élément comme étiquette pour l'entrée. | ||
| option | role | listitem | Indique aux technologies d'assistance que cet élément fonctionne comme un élément de liste. |
| Afficher Universel clé de section | |||
| label | label | for | Associe cela à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| input | input | disabled | Désactive un élément HTML, empêchant l'interaction de l'utilisateur et signalant un état non interactif |
| aria-describedby | Améliore l'accessibilité en associant un élément à une description, facilitant la lecture par les lecteurs d'écran | ||
| aria-required | Ajoute l'état requis lorsque la validation est requise. | ||
| icon | icon | for | Chaque fois qu'une icône est définie comme libellé, elle la relie à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| Événement clavier | Description |
|---|---|
| Tab | Déplace le focus vers la prochaine entrée pouvant être ciblée sur la page. |
| Shift + Tab | Déplace le focus vers l'entrée précédente pouvant être ciblée sur la page. |