Checkbox

Le composant Checkbox permet aux utilisateurs de sélectionner ou désélectionner une ou plusieurs options dans une liste. Les checkbox sont particulièrement utiles pour les formulaires et les configurations où plusieurs options peuvent être sélectionnées simultanément.

Quand utiliser

• Sélections multiples : pour sélectionner plusieurs options parmi une liste.
• Filtre : pour sélectionner ou déselectionner un ou plusieurs filtres dans une liste.
• Consentements & Conditions d’utilisation : pour obtenir des accords ou des consentements, par exemple pour les conditions d'utilisation ou les abonnements aux newsletters.

Quand ne pas utiliser

• Sélections uniques : pour une sélection unique parmi plusieurs options, utiliser des radio buttons.
• Actions immédiates : ne pas utiliser pour déclencher des actions immédiates comme l'envoi d'un formulaire ou la navigation. Dans ce cas, utiliser des boutons.

Checkbox ou Switch ?

• Les Checkbox permettent à l’utilisateur de sélectionner plusieurs choix et qui doivent être validé (Ex. : Formulaire) sauf dans le cas de filtrage de recherche qui lui peu s’actualiser directement.

• Un Switch permet de réaliser une action immédiate ou de basculer entre deux modes (Ex. : Forfait bloqué, Notification push).

Les différents types de checkbox

• Les checkbox contiennent uniquement un label, ils sont idéaux dans des interfaces ou formulaires compacts pour des choix simples et évidents qui n'ont pas besoin de détails et privilégient la rapidité de sélection (ex. : iPhone, Samsung, Google).

• Les checkbox tiles contiennent un label, une description optionnelle et une icône si besoin. Ils peuvent être utilisés pour des choix difficiles et importants qui ont besoin d'informations supplémentaires permettant à l'utilisateur de comparer avant d'effectuer un choix (ex. : types d’offres). Ils peuvent être positionnés verticalement ou horizontalement selon l’espace disponible.