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

COMPOSANTS

Case à cocher Simple

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 couramment utilisées dans les formulaires et les paramètres pour permettre aux utilisateurs d’indiquer leurs choix ou préférences. Elles sont particulièrement utiles 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

Check me !

Code

Documentation

Installation

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

Étape 1

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

npm install ip-checkbox

Étape 2

Importez le module dans votre fichier script :

Utilisation

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
idid Requise L'identifiant du champ pour l’accessibilité. stringNon défini
namename Requise Le nom du champ pour l’accessibilité. stringNon défini
defaultCheckeddefault-checked Optionnel Définit la case comme cochée par défaut. booleanfalse
disableddisabled Optionnel Désactive la case à cocher, empêchant toute interaction. booleanfalse

Contenu

Un emplacement (slot) de libellé prédéfini est disponible pour afficher le texte du label avant la case à cocher. Le contenu placé dans ce slot sera rendu à l’intérieur de la balise du composant.

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 :

Listening to Events

Pour écouter les événements émis par les composants ip-checkbox et ip-checkbox-list, ouvrez la console de votre navigateur. Les détails des événements s’afficheront automatiquement lorsque les cases 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