Skip to main content

Radio Group Component

This document outlines the specifications for the RadioGroupComponent, a reusable Angular component designed to present a group of radio buttons, allowing users to select a single option from a list of choices.

Purpose​

The RadioGroupComponent provides a user-friendly interface for selecting a single option from a set of mutually exclusive choices presented as radio buttons. It enhances the user experience by organizing options in a logical group and ensuring only one option can be selected at a time.

Usage​

Integrate the RadioGroupComponent into your Angular applications to facilitate the selection of single options from a predefined list presented as radio buttons.

Inputs​

  1. options: (Required) An array of objects representing the options available in the radio group. Each object should have the following properties:

    • value: (Required) The unique value associated with the option.
    • label: (Required) The label or display text for the option.

  2. selectedValue: (Optional) The value of the initially selected option. Defaults to null.

  3. disabled: (Optional) Disables all radio buttons in the group if set to true.

  4. layout: (Optional) Specifies the layout orientation of the radio buttons. Possible values:

    • 'horizontal': Arranges radio buttons horizontally (default).
    • 'vertical': Arranges radio buttons vertically.

Events​

  1. selectionChange: Fired when the selected option in the radio group changes. Emits the value of the newly selected option.

Example​

<app-radio-group
  [options]="radioOptions"
  [selectedValue]="selectedOption"
  [disabled]="false"
  layout="vertical"
  (selectionChange)="onSelectionChange($event)"
></app-radio-group>

Notes​

  • Ensure that each option in the options array has a unique value property to distinguish between options.
  • Customize the styling of the radio buttons and their labels to maintain consistency with the overall design of your application.
  • Implement the selectionChange event handler to respond to changes in the selected option within the radio group.
// Example data for options
radioOptions = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

selectedOption: string | null = 'option2';

onSelectionChange(value: string) {
  this.selectedOption = value;
}