Inputs allow users to input text and usually appear in forms. Users may enter text, numbers, or mixed-format types of input.
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<label>Initial value</label>
<md-input v-model="initialValue"></md-input>
</md-input-container>
<md-input-container>
<label>With label</label>
<md-input placeholder="My nice placeholder"></md-input>
</md-input-container>
<md-input-container md-inline>
<label>Inline field</label>
<md-input></md-input>
</md-input-container>
<md-input-container>
<label>Number</label>
<md-input type="number"></md-input>
</md-input-container>
<md-input-container>
<label>Textarea</label>
<md-textarea></md-textarea>
</md-input-container>
<md-input-container>
<label>Disabled</label>
<md-input disabled></md-input>
</md-input-container>
</form>
export default {
data() {
return {
initialValue: 'My initial value'
};
}
};
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<label>Regular Password</label>
<md-input type="password"></md-input>
</md-input-container>
<md-input-container md-has-password>
<label>Password Reveal</label>
<md-input type="password"></md-input>
</md-input-container>
</form>
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<label>Required</label>
<md-input required></md-input>
</md-input-container>
<md-input-container class="md-input-invalid">
<label>Error</label>
<md-input required></md-input>
</md-input-container>
<md-input-container class="md-input-invalid">
<label>Error with message</label>
<md-input required></md-input>
<span class="md-error">Validation message</span>
</md-input-container>
<md-input-container class="md-input-invalid">
<label>Textarea with error</label>
<md-textarea></md-textarea>
<span class="md-error">Textarea validation message</span>
</md-input-container>
</form>
<form novalidate @submit.stop.prevent="submit">
<md-input-container>
<label>Textarea</label>
<md-textarea maxlength="70"></md-textarea>
</md-input-container>
<md-input-container>
<label>Input</label>
<md-input maxlength="20"></md-input>
</md-input-container>
</form>
<form novalidate @submit.stop.prevent="submit">
<div v-md-theme="'green'">
<md-input-container>
<label>Green - Input</label>
<md-input></md-input>
</md-input-container>
</div>
<div v-md-theme="'cyan'">
<md-input-container>
<label>Cyan - Textarea</label>
<md-textarea></md-textarea>
</md-input-container>
</div>
</form>