Input

Input works alongside the native HTML input element, with additional custom styling and functionality.

Components

DaffInputComponent

import { DaffInputComponent } from '@daffodil/design/input'

DaffInputComponent provides the same functionality as a native <input> and contains custom styling and functionality.

@Component()
class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {
  readonly supportsAutoLabelling: boolean = true
  readonly id: string
  get raised(): boolean
  get state(): DaffFormFieldState
  _stateChanges: BehaviorSubject = new BehaviorSubject({
      focused: false,
      filled: false,
      disabled: false,
      error: false,
      valid: true,
    })
  stateChanges: Observable<DaffFormFieldState>

  emitState(deferred: boolean = false): void
}

Properties

supportsAutoLabelling

boolean

Default true

Description

Default	`true`
Description	Whether the control supports automatic label behavior. When `true`, the form field will associate the label with the control using `for` and `id` attributes. Defaults to `true`.

Whether the control supports automatic label behavior. When true, the form field will associate the label with the control using for and id attributes.

Defaults to true.

string

Default	–
Description	The unique identifier for the control element.

raised

boolean

Default	–
Description	Whether the label should be in the raised position. By default, matches the focused state.

state

DaffFormFieldState

Default	–
Description	Computes the current state of the form field control. Combines control properties and form validation state.

_stateChanges

BehaviorSubject

Default	`new BehaviorSubject({ focused: false, filled: false, disabled: false, error: false, valid: true, })`
Description

stateChanges

Observable

Default	–
Description	Observable stream of state changes for the form field control.

() Methods

Parameters

Parameter	`deferred: boolean`
Default	false
Description

Modules

DaffInputModule

Deprecated

import { DaffInputModule } from '@daffodil/design/input'

@NgModule()
class DaffInputModule {}