Passer au contenu principal

CheckBox

Ouvrir dans ChatGPT
Shadow dwc-checkbox 23.01
Java API

Un CheckBox peut être sélectionné ou désélectionné, et affiche son état actuel sous forme de coche. Les cases à cocher fonctionnent bien pour activer ou désactiver des paramètres individuels ou permettre aux utilisateurs de choisir plusieurs options dans un ensemble.

Usages​

Le CheckBox est préférable dans les scénarios où les utilisateurs doivent faire plusieurs sélections parmi une liste d'options. Voici quelques exemples de quand utiliser le CheckBox :

  1. Sélection de tâches ou de fonctionnalités : Les cases à cocher sont couramment utilisées lorsque les utilisateurs ont besoin de sélectionner plusieurs tâches ou fonctionnalités pour effectuer certaines actions ou configurations.

  2. Paramètres de préférences : Les applications qui impliquent des panneaux de préférences ou de réglages utilisent souvent des cases à cocher pour permettre aux utilisateurs de choisir plusieurs options parmi un ensemble de choix. C'est idéal pour des options qui ne s'excluent pas mutuellement. Par exemple :

  • Activer ou désactiver les notifications
  • Choisir un thème en mode sombre ou clair
  • Sélectionner les préférences de notification par e-mail

  1. Filtrage ou tri : Un CheckBox peut être utilisé dans des applications qui nécessitent que les utilisateurs sélectionnent plusieurs filtres ou catégories, comme le filtrage des résultats de recherche ou la sélection de plusieurs éléments pour d'autres actions.

  2. Entrées de formulaire : Les cases à cocher sont couramment utilisées dans les formulaires pour permettre aux utilisateurs de sélectionner plusieurs options ou de faire des choix binaires. Par exemple :

    • S'abonner à une newsletter
    • Accepter les termes et conditions
    • Sélectionner des articles pour un achat ou une réservation

Texte et positionnement​

Les cases à cocher peuvent utiliser la méthode setText(String text), qui sera positionnée près de la case à cocher selon la position Position intégrée.

Les cases à cocher ont une fonctionnalité intégrée pour définir le texte à afficher soit à droite, soit à gauche de la case. Par défaut, le texte sera affiché à droite du composant. Le positionnement du texte est pris en charge par l'utilisation de l'énumération Position. Voici les deux paramètres :

Afficher le code


Indéterminisme​

Le composant CheckBox prend en charge l'indéterminisme, qui est un modèle UI couramment utilisé dans les formulaires et les listes pour indiquer qu'un groupe de cases à cocher présente un mélange d'états coché et décoché. Cet état est représenté par un troisième état visuel, généralement affiché sous forme de carré rempli ou d'un tiret à l'intérieur de la case à cocher. Il existe quelques cas d'utilisation courants associés à l'indéterminisme :

  • Sélection de plusieurs éléments : L'indéterminisme est utile lorsque les utilisateurs doivent sélectionner plusieurs éléments dans une liste ou un ensemble d'options. Cela permet aux utilisateurs d'indiquer qu'ils souhaitent sélectionner certains, mais pas tous, des choix disponibles.

  • Données hiérarchiques : L'indéterminisme peut être employé dans des scénarios où il existe une relation hiérarchique entre les cases à cocher. Par exemple, lors de la sélection de catégories et de sous-catégories, l'indéterminisme peut représenter que certaines sous-catégories sont sélectionnées tandis que d'autres ne le sont pas, et que le composant parent est dans un état indéterminé.

Afficher le code

Styling​

Expanses​

Les valeurs suivantes Expanses permettent un stylisme rapide sans utiliser de CSS. Les expanse sont prises en charge par l'utilisation de la classe énumération Expanse. Voici les expanse prises en charge pour le composant case à cocher :

Afficher le code


Loading...

Meilleures pratiques​

Pour garantir une expérience utilisateur optimale lors de l'utilisation du composant Checkbox, tenez compte des meilleures pratiques suivantes :

  1. Étiquetez clairement les options : Fournissez des étiquettes claires et concises pour chaque option de CheckBox afin de décrire avec précision le choix. Les étiquettes doivent être faciles à comprendre et à distinguer les unes des autres.

  2. Groupez les CheckBoxes : Regroupez les cases à cocher liées entre elles pour indiquer leur association. Cela aide les utilisateurs à comprendre que plusieurs options peuvent être sélectionnées au sein d'un groupe spécifique.

  3. Fournir une sélection par défaut : Si applicable, envisagez de fournir une sélection par défaut pour les CheckBoxes afin de guider les utilisateurs lorsqu'ils rencontrent pour la première fois les options. La sélection par défaut doit correspondre au choix le plus courant ou préféré.

  4. Indéterminisme : Si un composant CheckBox parent a plusieurs composants qui lui appartiennent de telle manière que certains peuvent être activés et d'autres désactivés, utilisez la propriété indéterminée pour montrer que tous les composants CheckBox ne sont pas cochés ou décochés.