• Aller au menu
  • Aller au contenu principal
Retour
Logo Ipedis

COMPOSANTS

Liste de Case à cocher

Une case à cocher est un composant qui permet aux utilisateurs de sélectionner une ou plusieurs options dans un ensemble. Généralement présentée sous la forme d’un petit carré, elle peut être cochée (sélectionnée) ou décochée (non sélectionnée). Les cases à cocher sont souvent utilisées dans des formulaires ou des paramètres pour permettre aux utilisateurs d’exprimer leurs choix ou préférences. Elles sont particulièrement adaptées lorsque les options ne sont pas exclusives, car elles autorisent plusieurs sélections au sein d’un même groupe. Lorsqu’une case est cochée, un symbole de validation apparaît à l’intérieur du carré, indiquant visuellement la sélection de l’utilisateur.

Demo

Code

Documentation

Installation

Suivez les étapes ci-dessous pour installer et utiliser le composant ip-checkbox-list dans votre projet.

Étape 1

Installez le composant ip-checkbox-list en tant que dépendance dans votre projet :

npm install ip-checkbox-list

Étape 2

Importez le module dans votre fichier script :

 

Usage

Pour utiliser ce composant, ajoutez les propriétés sous forme d’attributs.

Propriétés

Propriété Attribut Nécessité Description Type Valeur par défaut
optionsoptionsRequise Un tableau d’objets utilisés pour passer des options comme cases à cocher stringNon défini
ididRequise L'identifiant du champ pour l’accessibilité. stringNon défini
defaultCheckeddefault-checkedOptionnel Définit la case comme cochée par défaut. booleanfalse
disableddisabledOptionnel Désactive la case à cocher, empêchant toute interaction. booleanfalse
legendlegendOptionnel La légende de la liste de cases à cocher. stringNon défini

Exemple:

Personnalisation

Un ensemble de variables prédéfinies permet de personnaliser la case à cocher :

  • --primary-color
  • --secondary-color
  • --font-size
  • --checkbox-size
Pour modifier ces valeurs, utilisez le code CSS suivant :

Événement

Pour écouter les événements émis par le composant ip-checkbox-list, ouvrez la console de votre navigateur. Les détails des événements s’afficheront lorsque les cases à cocher seront modifiées.

Exemple de code Javascript


              
  • Politique de confidentialité et cookies Ouvre dans un nouvel onglet
  • Mentions légales Ouvre dans un nouvel onglet
  • Ipedis.com Ouvre dans un nouvel onglet