Checkbox component

The component <day-checkbox> is a form control that provides the same functionality as a native <input type="checkbox">, enhanced with DAY Design styling. import { DAYCheckboxComponent } from '@dayerlin-bustamante/checkbox';

Dependencies

'@core'

'@icon'

Selectors

Checkbox: day-checkbox

Installation and Usage

npm install @dayerlin-bustamante/checkbox

import { DAYCheckboxComponent } from '@dayerlin-bustamante/checkbox';

<day-checkbox>Label</day-checkbox>

Checkbox label

This label must be used with <day-label> component and can be positioned before or after the <input type="checkbox"> by setting the labelPosition property to 'before' or 'after' in <day-checkbox>.

Checkbox types

The checkbox can be used as a toggle switch by setting the type property to toggle. This will change the appearance of the checkbox to look like a toggle switch.

Use with @angular/forms

Supports both FormsModule and ReactiveFormsModule.

Indeterminate state

Supports an indeterminate state and can be checked or unchecked. This checkbox is often used for a list of multiple checkboxes where it is indeterminate whether any of them are checked. It can be checked to select all items in the list as checked.

This state is only applicable to the checkbox and not to the toggle switch.

Inputs

Name	Description	Default
id: string \| null	Value for input id and label for attribute.	null
value: any	Checkbox input value.
labelPosition: <'before' \| 'after'>	Label position: after or before the input.	before
type: <'checkbox' \| 'toggle'>	Type of the checkbox input.	checkbox

Output

Not included.

Computes and internal events

Name	Description	Default
onCheckboxChange()	Method called on click. Changes the value if it is not disabled.

Directives

Not included.

Public methods

Not included.