Text fields allow users to input, edit and select text typically inside forms. But they can appear in other places as well like dialog boxes and search.
Vue Material fields work with a md-field wrapped around an input component, that can be md-input, md-textarea or even a md-select.
md-select has its own documentation page, dedicated to show better examples on how to use it.Fields mimic the HTML5 attributes to keep the same compatibility with native inputs, but has extra options. This allows Vue Material to accordingly setup the various md-field with its corresponding input options.
You will be able to set the same properties of a regular input element on md-input. This is also valid for textarea and select. Take a look:
Vue Material has validation states to show error messages. You can use it along with other 3rd party Vue validation libraries, like Vuelidate or Vee-Validate:
You can use character counters where you need to limit the user input, like on Twitter's 280 character tweet:
Sometimes we may want to differentiate our inputs based on it content value:
Fields can have a clearable feature to make it easier for users to clear the value. To use passwords better we can show a toggle button to reveal the password. This is really useful for mobile applications:
Prefixes and suffixes can be used to clarify units or to add input in advance. Prefixes are left justified in the text field whereas suffixes are right justified. Text fields can have both prefixes and suffixes.
The following options can be applied to any field:
| Name | Description | Default |
|---|---|---|
| md-inline Boolean | Make the label inline. This means that the label will disappear when the input receives a focus. | false |
| md-counter Boolean | Enable the character counter. Only works with fields that have a md-input or md-textarea with a maxlength or md-counter attributes. | false |
| md-clearable Boolean | Add a clear button on the right of the input. | false |
| md-toggle-password Boolean | Add a toggle button on the right of the input to reveal/hide the password. Only works with fields that have a md-input with type password. | false |
The following options can be applied to any input:
| Name | Description | Default |
|---|---|---|
| v-model String|Number|Boolean|Array | The model variable to bind the input value | null |
| type String | The input type. Similar to HTML5 type attribute. | text |
| placeholder String | The input placeholder. Similar to HTML5 placeholder attribute. | null |
| required Boolean | The input required. Similar to HTML5 required attribute. | false |
| id String | The input id. Similar to HTML5 id attribute. | a random string |
| name String | The input name. Similar to HTML5 name attribute. | null |
| disabled Boolean | Disable the input and prevent it interactions. | false |
| maxlength Number | Enable the counter for the field and set a maxlength | null |
| md-counter Number|Boolean | Enable the counter for the field. This is useful when you want only a counter without setting a maxlength. After setting a maxlength, in case if you do not want to display the counter, set this prop to false | true |
The following options can be applied to any textarea:
| Name | Description | Default |
|---|---|---|
| v-model String|Number|Boolean|Array | The model variable to bind the textarea value | null |
| placeholder String | The textarea placeholder. Similar to HTML5 placeholder attribute. | null |
| required Boolean | The input required. Similar to HTML5 required attribute. | false |
| id String | The textarea id. Similar to HTML5 id attribute. | a random string |
| name String | The textarea name. Similar to HTML5 name attribute. | null |
| disabled Boolean | Disable the textarea and prevent it interactions. | false |
| maxlength Number | Enable the counter for the field and set a maxlength | null |
| md-counter Number | Enable the counter for the field. This is useful when you want only a counter without set a maxlength | null |
| md-autogrow Boolean | Enable the textarea autogrow | false |
input or textarea attributes can be used on md-input/md-textarea respectively.