User-friendly text fields in AngularJS

Usage no npm install needed!

<script type="module">
  import vTextfield from 'https://cdn.skypack.dev/v-textfield';


User-friendly text fields in AngularJS

You can use vTextfild to show (hide) validation messages, error/success input indicators, or interactive Float Labels. It basically adds the following classes to the v-textfield directive:

  • is-focused
  • is-blured
  • is-valid
  • is-invalid
  • is-dirty
  • is-pristine
  • is-required
  • is-optional
  • has-value
  • has-noValue
  • has-placeholder
  • has-noPlaceholder



  • Use bower bower install v-textfield, or download files from the github repo
  • Reference v-textfield.css and v-textfield.js in your index.html file
  • Reference the module in your app: angular.module('myApp', [ 'vTextfield' ])


<v-textfield class="Textfield--default">
  <label hint="Optional">Name</label>
  <input name="myName" type="text" ng-model="model.myName" v-textfield-input>

<v-textfield class="Textfield--default">
  <input name="myEmail" type="email" ng-model="model.myEmail" required v-textfield-input>

  <ng-messages for="myForm.myEmail.$error">
    <ng-message when="email">Please enter a valid email address.</ng-message>
    <ng-message when="required">You did not enter a email address.</ng-message>

<v-textfield class="vTextfield--default">
  <input name="myPassword" type="password" ng-model="model.myPassword" ng-minlength="6" required v-textfield-input>

  <ng-messages for="myForm.myPassword.$error">
    <ng-message when="minlength">Your password is too short.</ng-message>
    <ng-message when="required">Please enter a password.</ng-message>