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.