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 Field Demo

Help text

Modify behaviour of text-fields:


Text Field with Icon Demo

face

Input with leading icon

delete

Input with trailing action icon

Modify behaviour of text-fields:


Text Area Demo

Multiline input:

Modify behaviour of text-field:

API

Directive: MdcTextFieldInputDirective

Selector: input[mdcTextFieldInput] textarea[mdcTextFieldInput]

Directive for the native input of a text-field (see MdcTextFieldDirective). Add this as the first child to an mdcTextField (or as the second child when you want to have a leading icon on the text-field).

PropertyDescription
@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 set its for attribute to this id value.

@Input()
disabled
any

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). Add this as the first child to an mdcTextField for a leading icon, or as the last child for a trailing icon.

Directive: MdcTextFieldHelperTextDirective

Selector: [mdcTextFieldHelperText]
Exported as: mdcHelperText

Directive for an optional helper-text to show supplemental information or validation messages for an mdcTextField. Add this just after the mdcTextField as a sibbling element to the mdcTextField. Then export it as a mdcHelperText, and assign the exported object to the helperText property of the mdcHelperText. See the examples for hints on how to do this.

PropertyDescription
@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 when validation is set, when the input is invalid).

Directive: MdcTextFieldDirective

Selector: [mdcTextField]

Material design text-field. It is required to add at least an input (mdcTextFieldInput), and a label (mdcFloatingLabel) as child elements.

PropertyDescription
@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()
box
any

When this input is set to a value other than false, the text-field will be styled as a box, and the box will get a ripple animation on click.

@Input()
outlined
any

When this input is set to a value other than false, the text-field will be styled with a notched outline.

@Input()
dense
any

When this property is defined and does not have value false, the text-field will be styled more compact.

@Input()
helperText
MdcTextFieldHelperTextDirective

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