Radio

Radio is used to select a single value from a selection of values.

Components

DaffRadioComponent

import { DaffRadioComponent } from '@daffodil/design/radio'

@Component()
class DaffRadioComponent implements OnInit {
  disabled: boolean = false
  focused: boolean = false

  @Input() checked: boolean
  @Input() value: any
  @Input() id: string = 'daff-radio-' + radioUniqueId
  @Input() name: string = ''
  @Input() label: string = this.name
  @Input() labelledby: string

  @Output() selectionChange: EventEmitter<boolean> = new EventEmitter()

  onFocus(): void
  onBlur(): void
  select(): void
  deselect(): void
  onChange(): void
}

Inputs

checked

boolean

Default	–
Description	The checked property of the radio

value

any

Default	–
Description	The value of the radio

string

Default	`'daff-radio-' + radioUniqueId`
Description	The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique.

name

string

Default	`''`
Description	Name of the Radio

label

string

Default	`this.name`
Description	Used for aria-label. Default to name if user does not input a label.

labelledby

string

Default	–
Description	Used for aria-labelledby.

Outputs

selectionChange

EventEmitter

Default	–
Description	Output event of selection being changed

() Methods

DaffRadioSetComponent

import { DaffRadioSetComponent } from '@daffodil/design/radio'

@Component()
class DaffRadioSetComponent {
  @Input() name: string
}

Inputs

name

string

Default	–
Description

Directives

DaffRadioControlValueAccessorDirective

import { DaffRadioControlValueAccessorDirective } from '@daffodil/design/radio'

ControlValueAccessor functionality for the DaffRadio

@Directive()
class DaffRadioControlValueAccessorDirective implements OnInit, ControlValueAccessor {
  _onChange: () => void
  _onTouched: () => void
  @Optional() @Self() _control: NgControl

  @Input() value: any
  @Input() name: string

  writeValue(value: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean): void
  fireSelect(): void
  fireDeselect(): void
}

Inputs

value

any

Default	–
Description	The value of the ControlValueAccessor

name

string

Default	–
Description	The name of the ControlValueAccessor

() Methods

Parameters

Parameter	`value: any`
Description

Parameters

Parameter	`fn: any`
Description

Parameters

Parameter	`fn: any`
Description

Parameters

Parameter	`isDisabled: boolean`
Description

Modules

DaffRadioModule

import { DaffRadioModule } from '@daffodil/design/radio'

@NgModule()
class DaffRadioModule {}