Radio

Overview

It can be hooked into Angular's FormControl to accomodate custom functionality. The DaffRadioSetComponent serves as a wrapper around a logical group of radios to provide styling.

<h2>Basic Radio</h2>
<daff-radio-set [formGroup]="radioGroup" name="race">
  <daff-radio formControlName="race" value="Terran">Terran</daff-radio>
  <daff-radio formControlName="race" value="Protoss">Protoss</daff-radio>
  <daff-radio formControlName="race" value="Zerg">Zerg</daff-radio>
</daff-radio-set>
<div>
  The best race to play as is: {{this.radioGroup.get('race').value}}
</div>

Usage

Within a standalone component

To use radio in a standalone component, import DAFF_RADIO_COMPONENTS directly into your custom component:

import { DAFF_RADIO_COMPONENTS } from '@daffodil/design/radio';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_RADIO_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use radio in a module, import DaffRadioModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffRadioModule } from '@daffodil/design/radio';
import { CustomComponent } from './custom.component';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffRadioModule,
  ],
})
export class CustomComponentModule { }

Deprecation notice: This method is deprecated. It's recommended to update all custom components to standalone.

Accessibility

Radio uses native <input> HTML elements to ensure an accesible experience by default. It supports inputs to customize the experience for accessibility by allowing native input for aria-label and aria-labelledby.