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
Text Field with Icon Demo
Text Area Demo
Selector: input[mdcTextFieldInput] textarea[mdcTextFieldInput]
Directive for the native input of a text-field (see
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).
If set to a value other than false, the text-field will be in disabled state.
Directive for an optional leading or trailing icon on the text-field (see
MdcTextFieldDirective). Add this as the first child to an
for a leading icon, or as the last child for a trailing icon.
Exported as: mdcHelperText
Directive for an optional helper-text to show supplemental information or validation
messages for an
Add this just after the
mdcTextField as a sibbling element to the
mdcTextField. Then export it as a
assign the exported object to the
helperText property of the
mdcHelperText. See the examples for hints on how to do this.
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.
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
Material design text-field. It is required to add at least an input
mdcTextFieldInput), and a label (
mdcFloatingLabel) as child
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
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.
When this input is set to a value other than false, the text-field will be styled with a notched outline.
When this property is defined and does not have value false, the text-field will be styled more compact.