AWE Radio Button Component

The <awe-radio-button> component is a customizable form control that allows users to select a single option from a set of choices. It supports various states, configurations, and can be used in forms or as standalone controls.

Basic Usage

The most basic usage of the radio button component includes an array of options.

<awe-radio-button [options]="options"></awe-radio-button>

options = [
  { value: 'option1', label: 'Option 1', checked: false, disabled: false },
  { value: 'option2', label: 'Option 2', checked: false, disabled: false },
  { value: 'option3', label: 'Option 3', checked: false, disabled: false }
];

Option Configuration

Each radio button option can be configured with the following properties:

interface RadioButtonOption {
  value: string;      // The value of the option
  label: string;      // The text displayed next to the radio button
  checked: boolean;   // Whether the option is selected
  disabled: boolean;  // Whether the option is disabled
}

Radio Button Groups

Radio buttons are typically used in groups where only one option can be selected at a time.

Example Group Implementation

<awe-radio-button 
  [options]="fruitOptions"
  (change)="handleFruitChange($event)">
</awe-radio-button>

fruitOptions = [
  { value: 'apple', label: 'Apple', checked: false, disabled: false },
  { value: 'banana', label: 'Banana', checked: false, disabled: false },
  { value: 'orange', label: 'Orange', checked: false, disabled: false },
  { value: 'strawberry', label: 'Strawberry', checked: false, disabled: false }
];

selectedFruit: string | null = null;

handleFruitChange(event: Event): void {
  const target = event.target as HTMLInputElement;
  this.selectedFruit = target.value;
  console.log('Selected fruit:', this.selectedFruit);
}

States

The radio button component supports different states to indicate its current condition.

Default State

defaultOptions = [
  { value: 'option1', label: 'Option 1', checked: false, disabled: false },
  { value: 'option2', label: 'Option 2', checked: false, disabled: false }
];

Checked State

checkedOptions = [
  { value: 'option1', label: 'Option 1', checked: true, disabled: false },
  { value: 'option2', label: 'Option 2', checked: false, disabled: false }
];

Disabled State

disabledOptions = [
  { value: 'option1', label: 'Option 1', checked: false, disabled: true },
  { value: 'option2', label: 'Option 2', checked: false, disabled: false }
];

Disabled Checked State

disabledCheckedOptions = [
  { value: 'option1', label: 'Option 1', checked: true, disabled: true },
  { value: 'option2', label: 'Option 2', checked: false, disabled: false }
];

Events

The radio button component emits a change event when its state changes, which can be handled in your component.

<awe-radio-button 
  [options]="options"
  (change)="handleRadioChange($event)">
</awe-radio-button>

handleRadioChange(event: Event): void {
  const target = event.target as HTMLInputElement;
  console.log('Radio button changed:', target.value);
  // Handle the radio button change
}

Form Integration

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

<form [formGroup]="myForm">
  <awe-radio-button 
    [options]="genderOptions"
    formControlName="gender">
  </awe-radio-button>
  
  <div *ngIf="myForm.get('gender').hasError('required') && myForm.get('gender').touched">
    <span class="error-message">Please select a gender</span>
  </div>
</form>

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

// In your component class
myForm: FormGroup;
genderOptions = [
  { value: 'male', label: 'Male', checked: false, disabled: false },
  { value: 'female', label: 'Female', checked: false, disabled: false },
  { value: 'other', label: 'Other', checked: false, disabled: false }
];

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    gender: ['', Validators.required]
  });
}

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

Accessibility

The radio button component is designed with accessibility in mind:

• It uses proper semantic HTML elements (<input type="radio">)
• It supports keyboard navigation (Tab to focus, Space to select)
• It includes appropriate ARIA attributes
• It maintains focus states for keyboard users
• It provides proper label association for screen readers
• It ensures only one option can be selected at a time within a group

API Reference

Inputs

Input	Type	Default	Description
options	RadioButtonOption[]	[]	Array of radio button options
name	string	''	Name attribute for the radio button group
id	string	''	ID prefix for the radio button inputs

RadioButtonOption Interface

Property	Type	Default	Description
value	string	''	The value of the radio button option
label	string	''	The text displayed next to the radio button
checked	boolean	false	Whether the radio button is selected
disabled	boolean	false	Whether the radio button is disabled

Outputs

Output	Type	Description
change	EventEmitter<Event>	Emitted when a radio button selection changes

Customization

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

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

/* Customize the radio button size */
awe-radio-button {
  --radio-size: 20px;
}

Best Practices

• Use radio buttons when users need to select a single option from a list
• Use checkboxes instead when users can select multiple options
• Group related radio buttons together
• Provide a default selected option when possible
• Use clear, concise labels that describe each option
• Arrange radio buttons vertically for better readability
• Ensure sufficient spacing between options for touch interfaces
• Consider using the disabled state for options that are not currently available
• Validate form submissions when radio button selections are required
• Use meaningful values that can be easily processed by your application