AWE Checkbox Component

The <awe-checkbox> component is a customizable form control that allows users to select one or multiple options. It supports various states, sizes, and can be used in forms or as standalone controls.

Basic Usage

The most basic usage of the checkbox component includes a label and a value.

<awe-checkbox label="Accept terms and conditions"></awe-checkbox>

Sizes

The checkbox component comes in three different sizes to accommodate various design needs.

Small Checkbox

<awe-checkbox size="small" label="Small Checkbox"></awe-checkbox>

Medium Checkbox (Default)

<awe-checkbox size="medium" label="Medium Checkbox"></awe-checkbox>

Large Checkbox

<awe-checkbox size="large" label="Large Checkbox"></awe-checkbox>

States

The checkbox component supports different states to indicate its current condition.

Default State

<awe-checkbox label="Default Checkbox"></awe-checkbox>

Checked State

<awe-checkbox label="Checked Checkbox" [isChecked]="true"></awe-checkbox>

Indeterminate State

<awe-checkbox label="Indeterminate Checkbox" [indeterminate]="true"></awe-checkbox>

Disabled State

<awe-checkbox label="Disabled Checkbox" [disabled]="true"></awe-checkbox>

Disabled Checked State

<awe-checkbox label="Disabled Checked Checkbox" [disabled]="true" [isChecked]="true"></awe-checkbox>

Error State

<awe-checkbox label="Error Checkbox" [error]="true"></awe-checkbox>

Checkbox Group

Checkboxes can be grouped together to represent related options.

<div class="checkbox-group">
  <h3>Select your favorite fruits:</h3>
  <awe-checkbox label="Apple" (changed)="handleCheckboxChange('apple', $event)"></awe-checkbox>
  <awe-checkbox label="Banana" (changed)="handleCheckboxChange('banana', $event)"></awe-checkbox>
  <awe-checkbox label="Orange" (changed)="handleCheckboxChange('orange', $event)"></awe-checkbox>
  <awe-checkbox label="Strawberry" (changed)="handleCheckboxChange('strawberry', $event)"></awe-checkbox>
</div>

selectedFruits: string[] = [];

handleCheckboxChange(fruit: string, isChecked: boolean): void {
  if (isChecked) {
    this.selectedFruits.push(fruit);
  } else {
    this.selectedFruits = this.selectedFruits.filter(item => item !== fruit);
  }
  console.log('Selected fruits:', this.selectedFruits);
}

Events

The checkbox component emits a changed event when its state changes, which can be handled in your component.

<awe-checkbox 
  label="Subscribe to newsletter" 
  (changed)="handleCheckboxChange($event)">
</awe-checkbox>

handleCheckboxChange(isChecked: boolean): void {
  console.log('Checkbox state changed:', isChecked);
  // Handle the checkbox change
}

Form Integration

The checkbox component can be integrated with Angular's reactive forms.

<form [formGroup]="myForm">
  <awe-checkbox 
    label="I agree to the terms and conditions" 
    formControlName="agreeToTerms">
  </awe-checkbox>
  
  <div *ngIf="myForm.get('agreeToTerms').hasError('required') && myForm.get('agreeToTerms').touched">
    <span class="error-message">You must agree to the terms and conditions</span>
  </div>
</form>

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// In your component class
myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    agreeToTerms: [false, Validators.requiredTrue]
  });
}

onSubmit() {
  if (this.myForm.valid) {
    console.log('Form submitted', this.myForm.value);
  } else {
    console.log('Form is invalid');
  }
}

Accessibility

The checkbox component is designed with accessibility in mind:

• It uses proper semantic HTML elements (<input type="checkbox">)
• It supports keyboard navigation (Tab to focus, Space to toggle)
• It includes appropriate ARIA attributes
• It maintains focus states for keyboard users
• It provides proper label association for screen readers

API Reference

Inputs

Input	Type	Default	Description
label	string	''	The text displayed next to the checkbox
id	string	''	The ID attribute for the checkbox input
isChecked	boolean	false	Whether the checkbox is checked
indeterminate	boolean	false	Whether the checkbox is in an indeterminate state
disabled	boolean	false	Whether the checkbox is disabled
error	boolean	false	Whether the checkbox is in an error state
size	'small' | 'medium' | 'large'	'medium'	The size of the checkbox

Outputs

Output	Type	Description
changed	EventEmitter<boolean>	Emitted when the checkbox state changes

Customization

The checkbox component can be customized using CSS variables to match your application's design system. Here are some examples of how you can customize the checkbox:

/* Customize the checkbox color */
awe-checkbox {
  --button-primary-bg-action: #ff5722;
  --text-white: #ffffff;
  --icon-neutral: #999999;
}

/* Customize the checkbox size */
awe-checkbox.large {
  --checkbox-size: 24px;
}

Best Practices

• Use clear, concise labels that describe the option
• Group related checkboxes together
• Use checkboxes for binary choices or multiple selections
• Use radio buttons instead when only one option can be selected
• Provide a default state that makes sense for your use case
• Consider using the indeterminate state for parent checkboxes in hierarchical selections
• Ensure sufficient color contrast for accessibility
• Validate form submissions when checkboxes are required