DaffSwitchComponent

The switch component provides a way to toggle between two settings.

import { DaffSwitchComponent } from '@daffodil/design/switch'

@Component()
class DaffSwitchComponent {
  @Input() @HostBinding() 
  get disabled(): any
  set disabled(value): any
  @HostBinding() 
  get disabledAttribute()
  @HostBinding() 
  get ariaDisabled()
  @HostBinding() 
  get classes()
  @Input() @HostBinding() loading: false
  @Input() checked: false
  @Input() labelPosition: DaffLabelPosition
  @Input() error: false
  _disabled: false
  @HostListener() handleKeydown(event: KeyboardEvent)
  @Input() ariaLabel: ''
  @Input() id: string
  @Output() toggled: EventEmitter<boolean>
  onToggle()
}

Selector: 'daff-switch'

Properties

Name	Type	Description
@Input() disabled	any	Whether the switch is disabled and/or loading.
disabledAttribute
ariaDisabled
classes
@Input() loading	false	Whether the switch is loading.
@Input() checked	false	Current state of switch (on/off).
@Input() labelPosition	DaffLabelPosition	The position of the label relative to the switch. Defaults to 'daff-left'.
@Input() error	false	Whether the switch shows an error.
_disabled	false
handleKeydown
@Input() ariaLabel	''	aria-label for the switch.
@Input() id	string
@Output() toggled	EventEmitter<boolean>
onToggle

Examples

<daff-switch [checked]="checked" loading="loading" [error]="true" [labelPosition]="top">
   Label
   <daff-error-message>Error message</daff-error-message>
</daff-switch>