Vue Material -

Input & Textarea

Text fields allows users to input, edit, and select text, typically inside forms but they can appear in other places, like dialog boxes and search.

Vue Material fields works with a md-field as a wrapper with a input component inside, that can be md-input, md-textarea or even a md-select.

Selects have its own documentation page, dedicated to show better examples on how to use it.

Text Fields

Fields mimics the HTML5 attributes to keep the same compatibility with native inputs, but giving extra options. This allows Vue Material to setup the md-field according with the 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:

Input and Textarea

Errors and Messages

Vue Material have validation states to show error messages. You can use it along with other Vue 3rd party validation libraries, like Vuelidate or Vee-Validate:

Validation

Character count

You can use character counters where you need to limit the user input, like on Twitter's 280 character tweet:

Counter

Icons

Sometimes we may want to differentiate our inputs based on it content value:

Outside and inline icons

Inline Actions

Fields can have a clearable feature to make easy for users to clear the value. And to be easier to type passwords we can show a toggle button to reveal the password. This is really useful for mobile applications:

Clear and password

API - md-field

The following options can be applied to any field:

NameDescriptionDefault
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

API - md-input

The following options can be applied to any input:

NameDescriptionDefault
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 Enable the counter for the field. This is useful when you want only a counter without set a maxlength null

API - md-textarea

The following options can be applied to any textarea:

NameDescriptionDefault
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
Any input or textarea attributes can be used on md-input/md-textarea respectively.