Introduction

The Checkbox is a form element in web and application design that allows users to select/deselect an option from a list of choices. It is a fundamental component in designing user interfaces that require users to make a selection.

Anatomy

The Checkbox consists of a small square button. When the button is selected, it displays an animation of a checkmark inside it. The Checkbox is designed to work with other form elements, such as input fields and buttons, to create a comprehensive user interface.

Usage

The Checkbox is used to provide users with select/deselect option, and they can chose it like yesnNo. It is typically used in forms, questionnaires, and surveys. The Checkbox is also used in filters, search options, and settings where users need to select/deselect some options. When designing a Checkbox, it is important to consider their accessibility, usability, and visual design.

Differences from Other Form Elements

The Checkbox is often compared to other form elements, such as the toggle button, switch, and radio button. While they may look similar, they have different functions and usage. The toggle button and switch are used to toggle between two states, usually on/off or true/false. The checkbox allows users to select one or more options from a list of choices. The radio button, on the other hand, allows users to select only one option from a list of choices.

Checkbox Sizes

The table below provides the size specifications: | Size | Dimensions | Padding | Outter Circle(In hover and pressed state) | | ------------- | ---------- | -------- | ----------------------------------------- | | Mobile | 16 x 16 px | 2 x 2 px | 36 x 36 px | | Tablet | 18 x 18 px | 2 x 2 px | 38 x 38 px | | Web/Desktop | 20 x 20 px | 2 x 2 px | 40 x 40 px |

Checkbox Colors

The table below provides the color specifications: | Color | Hex code | | --------- | -------- | | Primary-1 | #FFB42A | | Neutral-1 | #262626 | | Neutral-2 | #6C6969 |

Checkbox States

The Checkbox Button component has several states, depending on the user's interaction with it | Color | Description | | -------- | ---------------------------------------------------------------------- | | Default | The initial state of the Checkbox component | | Hover | When the user hovers the mouse pointer over the Checkbox component | | Pressed | When the user clicks on the Checkbox component | | Disabled | When the Checkbox is not available for interaction |

indreka-checkbox component

The <indreka-checkbox></indreka-checkbox> component having the following property:

1. name having type of string.
2. value having type of string.
3. checked having type of boolean.
4. disabled having type of boolean.
5. id having type of string.
6. labelId having type of string.
7. describerId having type of string.
8. controlValue having type of string.
9. required having type of boolean.
10. error having type of string.

use

We can pass attributes inside like:

1. name

-- This is the name of the checkbox which stores the name, this will stay same for a group of checkboxes.

2. value

-- This is the value of the checkbox, this should always be different.

3. checked

-- This will set the checkbox checked by default.

4. disabled

-- This will disable the button preventing the user to perform any mouse events on button and also update the aria-disabled.

5. id

-- This will set an id for the checkbox that can be used with an external label.

6. labelId Text

-- Label id will require the name of the label element that will be the label for this checkbox, will update the aria-labelledby.

7. describerId Text

-- Describer id will require the name of an element that is describing the button/any information about button. will update aria-describedby.

8. required

-- This will set checkbox field is required

Angular use

We are using custom events for values. so, need to be implemented in the HTML code to get the checkbox values. checkboxEvent

<indreka-checkbox (checkboxEvent)="eventHandler($event)" >Text

--Example html <indreka-checkbox name="vehicle" value="car" (checkboxEvent)="handleCheckboxEvent($event)" >Text

ts handleCheckboxEvent(event: Event) { const customEvent = event as CustomEvent; console.log(customEvent.detail); -- will provide the checked value of Checkbox (true/false)

const nameValue = event.target as HTMLInputElement; console.log(nameValue.name); -- will fetch the name used (vehicle) console.log(nameValue.value); -- will fetch the value used (car) }