|
| 1 | +# md-input-container |
| 2 | + |
| 3 | +Inputs are the basic input component of Material 2. The spec can be found |
| 4 | +[here](https://www.google.com/design/spec/components/text-fields.html). `md-input-container` acts as |
| 5 | +a wrapper for native `input` and `textarea` elements that is used to add material design styles and |
| 6 | +behavior. The native element wrapped by the `md-input-container` must be marked with the `md-input` |
| 7 | +directive. |
| 8 | + |
| 9 | +<!-- example(input-overview) --> |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +### `input` and `textarea` attributes |
| 14 | + |
| 15 | +All of the attributes that can be used with normal `input` and `textarea` elements can be used on |
| 16 | +elements within the `md-input-container` as well. This includes angular specific ones such as |
| 17 | +`ngModel` and `formControl`. |
| 18 | + |
| 19 | +The only limitations are that the `type` attribute can only be one of the values supported by |
| 20 | +`md-input-container` and the native element cannot specify a `placeholder` attribute if the |
| 21 | +`md-input-container` also contains a `md-placeholder` element. |
| 22 | + |
| 23 | +#### Supported `input` types |
| 24 | + |
| 25 | +The following [input types](http://www.w3schools.com/TAGs/att_input_type.asp) can be used with |
| 26 | +`md-input-container`: |
| 27 | +* date |
| 28 | +* datetime-local |
| 29 | +* email |
| 30 | +* month |
| 31 | +* number |
| 32 | +* password |
| 33 | +* search |
| 34 | +* tel |
| 35 | +* text |
| 36 | +* time |
| 37 | +* url |
| 38 | +* week |
| 39 | + |
| 40 | +### Placeholder |
| 41 | + |
| 42 | +A placeholder is an indicative text displayed in the input zone when the input does not contain |
| 43 | +text. When text is present, the indicative text will float above this input zone. |
| 44 | + |
| 45 | +The `floatingPlaceholder` attribute of `md-input-container` can be set to `false` to hide the |
| 46 | +indicative text instead when text is present in the input. |
| 47 | + |
| 48 | +A placeholder for the input can be specified in one of two ways: either using the `placeholder` |
| 49 | +attribute on the `input` or `textarea`, or using an `md-placeholder` element in the |
| 50 | +`md-input-container`. Using both will raise an error. |
| 51 | + |
| 52 | +### Prefix and Suffix |
| 53 | + |
| 54 | +HTML can be included before, and after the input tag, as prefix or suffix. It will be underlined as |
| 55 | +per the Material specification, and clicking it will focus the input. |
| 56 | + |
| 57 | +Adding the `md-prefix` attribute to an element inside the `md-input-container` will designate it as |
| 58 | +the prefix. Similarly, adding `md-suffix` will designate it as the suffix. |
| 59 | + |
| 60 | +### Hint Labels |
| 61 | + |
| 62 | +Hint labels are the labels that show below the underline. An `md-input-container` can have up to two |
| 63 | +hint labels; one on the `start` of the line (left in an LTR language, right in RTL), and one on the |
| 64 | +`end`. |
| 65 | + |
| 66 | +Hint labels are specified in one of two ways: either using the `hintLabel` attribute of |
| 67 | +`md-input-container`, or using an `md-hint` element inside the `md-input-container`, which takes an |
| 68 | +`align` attribute containing the side. The attribute version is assumed to be at the `start`. |
| 69 | +Specifying a side twice will result in an exception during initialization. |
| 70 | + |
| 71 | +### Divider Color |
| 72 | + |
| 73 | +The divider (line under the `input` content) color can be changed by using the `dividerColor` |
| 74 | +attribute of `md-input-container`. A value of `primary` is the default and will correspond to the |
| 75 | +theme primary color. Alternatively, `accent` or `warn` can be specified to use the theme's accent or |
| 76 | +warn color. |
0 commit comments