COMPONENTS

Checkbox-list

A checkbox is a component that allows users to make a selection from a set of options. Typically presented as a small square box, it can be either checked (selected) or unchecked (not selected). Checkboxes are commonly used in forms and settings where users can indicate their choices or preferences. They are particularly useful for options that are not mutually exclusive, allowing multiple selections from a group of choices. When a checkbox is selected, a checkmark or a tick (✓) appears inside the box, visually indicating the user's choice.

Installation

Follow these steps to install and use the ip-checkbox-list component in your project.

Step 1

Install the ip-checkbox-list component as a dependency in your project:

npm install ip-checkbox-list

Step 2

Import the module in your script file:

Usage

To use this component, add the properties as attributes.

Properties

Property	Attribute	Necessity	Description	Type	Default
`options`	`options`	Required	An array of objects used to pass options as checkboxes.	`string`	`Undefined`
`id`	`id`	Required	L'identifiant du champ pour l’accessibilité.	`string`	`Undefined`
`defaultChecked`	`default-checked`	Optional	Sets the checkbox to checked by default.	`boolean`	`false`
`disabled`	`disabled`	Optional	Disable the checkbox, preventing any interaction.	`boolean`	`false`
`legend`	`legend`	Optional	The legend for the list of checkboxes	`string`	`Undefined`

Example:

Customization

We have a set of predefined variables used to customize the checkbox:

--primary-color
--secondary-color
--font-size
--checkbox-size

To update the values, use the following CSS:

Listening to Events

To listen to events emitted by the ip-checkbox and ip-checkbox-list components, open your browser's console. Event details will be displayed in the console when checkboxes are modified.

Checkbox-list

Demo

Code

Documentation