@ng-zi/extensions-checkbox

MtxCheckbox Component Overview

The CheckboxComponent provides a customizable checkbox implementation built on Angular and Angular Material 18. This component allows developers to integrate checkbox inputs into their applications with flexibility and ease.

Features

Feature	Description
Label	Display a descriptive label next to the checkbox.
Checked State	Control the initial checked state of the checkbox.
Disabled State	Disable the checkbox to prevent user interaction.
Indeterminate State	Set the checkbox to an indeterminate state, useful for hierarchical selections.
Icon Support	Optionally display an icon next to the checkbox label.
Color Customization	Customize the checkbox color to match the application's theme.
Animation Styles	Apply animation effects to enhance user interaction.
Custom Styles	Flexibility to apply custom CSS classes for styling.
Accessibility	Built-in accessibility features, including ARIA attributes and keyboard navigation support.

Usage

The CheckboxComponent can be easily integrated into Angular applications. Here's a basic example of usage:

<mtx-checkbox 
  [config]="checkboxConfig" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>

Inputs

Input	Type	Description
config	MtxCheckboxConfig	Configuration object for the checkbox component.
label	string	Label text displayed next to the checkbox.
checked	boolean	Initial checked state of the checkbox.
disabled	boolean	Disables the checkbox if true.
indeterminate	boolean	Sets the checkbox to indeterminate state.
icon	string	Icon name displayed next to the checkbox label.
color	string	Color palette for the checkbox.
animation	string	Animation style for checkbox interaction.
styleType	string	Custom style type for checkbox appearance.
customClasses	string | string[]	Optional custom CSS classes for styling.
ariaLabel	string	Optional ARIA label for accessibility.
tabIndex	number	Optional tab order for keyboard navigation.
value	any	Optional value associated with the checkbox.

Outputs

Output	Type	Description
change	EventEmitter<MatCheckboxChange>	Emits when the checkbox state changes.

Examples

Checkbox Component Examples

Explore various usage scenarios and examples of the CheckboxComponent in action.

Basic Example

<mtx-checkbox 
  [config]="{ label: 'Basic Checkbox' }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>

Indeterminate Example

<mtx-checkbox 
  [config]="{ label: 'Indeterminate Checkbox', indeterminate: true }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>

Disabled Example

<mtx-checkbox 
  [config]="{ label: 'Disabled Checkbox', disabled: true }">
</mtx-checkbox>

Example with Icon and Color

<mtx-checkbox 
  [config]="{ label: 'Checkbox with Icon', icon: 'check', color: 'accent' }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>

Example with Animation and Style

<mtx-checkbox 
  [config]="{ label: 'Animated Checkbox', animation: 'bounce', styleType: 'rounded' }" 
  (change)="onCheckboxChange($event)">
</mtx-checkbox>

API Reference

MtxCheckbox Component API

The CheckboxComponent API documentation outlines the inputs, outputs, and methods available for configuring and interacting with the checkbox component.

Inputs

config

• Type: MtxCheckboxConfig

• Description: Configuration object for the checkbox component.

  Property	Type	Default Value	Description
  label	string	''	Label text displayed next to the checkbox.
  checked	boolean	false	Initial checked state of the checkbox.
  disabled	boolean	false	Disables the checkbox if true.
  indeterminate	boolean	false	Sets the checkbox to indeterminate state.
  icon	string	''	Icon name displayed next to the checkbox label.
  color	string	'primary'	Color palette for the checkbox.
  animation	string	''	Animation style for checkbox interaction.
  styleType	string	''	Custom style type for checkbox appearance.
  customClasses	string | string[]	''	Optional custom CSS classes for styling.
  ariaLabel	string	''	Optional ARIA label for accessibility.
  tabIndex	number	0	Optional tab order for keyboard navigation.
  value	any	null	Optional value associated with the checkbox.

customClasses

• Type: string \| string[]
• Description: Optional custom CSS classes to apply to the checkbox component for styling purposes.

Outputs

change

• Type: EventEmitter<MatCheckboxChange>

• Description: Event emitted when the checkbox state changes.

  • Properties
    • checked: boolean - New checked state of the checkbox.

Methods

The CheckboxComponent does not expose any public methods.

---

This api.md document provides a comprehensive overview of the inputs, outputs, and methods (if any) available for your CheckboxComponent. Adjust the content and structure as per your specific component implementation and project requirements.