Blox Material v1.0.0

Text Fields

The mdcTextField directive provides various types of text-fields. A text-field is composed of a label, input element, line, helper text, and possibly a leading or trailing icon.

Text Fields

Help text

Modify behaviour of text-fields:


Text Fields with Icons

Input with leading icon

Input with trailing action icon

Modify behaviour of text-fields:


Text Areas

Multiline input:

Modify behaviour of text-field:

API

Directive: MdcTextFieldInputDirective

Selector: input[mdcTextFieldInput] textarea[mdcTextFieldInput]

Directive for the native input of an mdcTextField.

Property Description
@Input()
id
string

Mirrors the id attribute. If no id is assigned, this directive will assign a unique id by itself. If an mdcFloatingLabel for this text-field is available, the mdcFloatingLabel will automatically be associated (either by a for attribute on the label, or by an aria-labelledby attribute on this input element).
@Input()
disabled
boolean

If set to a value other than false, the text-field will be in disabled state.

Directive: MdcTextFieldIconDirective

Selector: [mdcTextFieldIcon]

Directive for an optional leading or trailing icon on the text-field (see MdcTextFieldDirective). An icon before the mdcTextFieldInput will be styled as a leading icon. An icon after the mdcTextFieldInput will be styles as a trailing icon.

Property Description
@Output()
interact
EventEmitter<void>

Event emitted for icon interactions (a click or an 'enter' keypress). When this output is assigned, the icon will also set the role=button and tabindex=0 attributes, unless you give them another explicit value.
@Input()
tabindex

The tabindex for icons defaults to null (no tabindex set) for icons without subscriptions to the interact output, and to 0 for icons that have an interact binding. You can override this default, by setting a non-null value for this property.
@Input()
role

The role attribute for icons defaults to null (no role set) for icons without subscriptions to the interact output, and to button for icons that have an interact binding. You can override this default, by setting a non-null value for this property.

Directive: MdcTextFieldHelperLineDirective

Selector: [mdcTextFieldHelperLine]

This directive wraps an optional mdcTextFieldHelperText. It should be the next sibling of the associated mdcTextField if used. See mdcTextFieldHelperText for more info.

Directive: MdcTextFieldHelperTextDirective

Selector: [mdcTextFieldHelperText]
Exported as: mdcHelperText

Directive for an optional helper-text to show supplemental information or validation messages for an mdcTextField. This directive should be wrapped inside an mdcTextFieldHelperLine that comes directly after the mdcTextField it belongs to. Additionally, you must export it as an mdcHelperText, and assign the exported object to the helperText property of the mdcHelperText. See the examples for hints on how to do this.

The mdcTextFieldInput of the textfield will get aria-controls and aria-describedby accessibility attributes that point to the id of this helpertext element. If no id has been assigned, a unique id attribute will automatically be assigned. If the id attribute is changed, the aria attributes on the mdcTextFieldInput will be updated accordingly.

Property Description
@Input()
validation
boolean

If set to a value other than false, the helper text is treated as a validation message, and only shown when the input is invalid.
@Input()
persistent
boolean

If set to a value other than false, the helper text is always visible. Otherwise the helper text will only be shown when the input has focus (or if validation is set, when the input is invalid).

Directive: MdcTextFieldDirective

Selector: [mdcTextField]

Material design text-field. Text fields can be filled or outlined.

Filled text-fields should have the following child directives:

  • mdcTextFieldIcon (optional leading icon)
  • mdcTextFieldInput (required, the native input)
  • mdcTextFieldIcon (optional trailing icon)
  • mdcFloatingLabel (optional floating label)

Outlined text-fields should have the following child directives:

  • mdcTextFieldIcon (optional leading icon)
  • mdcTextFieldInput (required, the native input)
  • mdcTextFieldIcon (optional trailing icon)
  • mdcNotchedOutline (the outline, which can also contain an optional mdcFloatingLabel)

Addditionally the text-field can be followed by an mdcTextFieldHelperLine containing an mdcHelperText.

Property Description
@Input()
valid
boolean

The valid property provides a way to override the validity checking of the underlying angular form control or native input. A value of true or false will make the text-field validity styling based on this value. A value of null, or undefined will reset the validity styling to the state of the underlying angular form control or native input.

For most use cases messing with this input is not be needed. When the input/textarea is an ngControl, the mdcTextField is already aware of that, and is already using the 'valid' property of that control. However, in some specific cases, binding to valid can help. Example: When you want the mdcTextField to go to 'invalid' state only when the underlying control is invalid AND that control's value is changed, you can bind as follows: valid="myControl.valid || !myControl.dirty".
@Input()
helperText
MdcTextFieldHelperTextDirective | null

Assign an mdcTextFieldHelperText (exported as mdcHelperText) to this input to add a helper-text or validation message to the text-field. See the examples for hints on how to do this.