COMPONENTS

Simple Checkbox

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.

Check me !

Installation

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

Step 1

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

npm install ip-checkbox

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
`id`	`id`	Required	The ID of the input for accessibility	`string`	`Undefined`
`name`	`name`	Required	The name of the input for accessibility	`string`	`Undefined`
`defaultChecked`	`default-checked`	Optional	Sets the checkbox to checked by default	`boolean`	`false`
`disabled`	`disabled`	Optional	Disables the checkbox	`boolean`	`false`

Content

A predefined label slot is available to display the label text before the checkbox. The content placed in this slot will be rendered inside the component's tag.

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.

Simple Checkbox

Demo

Code

Documentation