Forms - States | Crossroads Digital Design Kit

UI Components / Forms

Validation states are a great way to provide visual feedback when filling out a form. Angular can use the ngModel directive to track the state and validity of the form.

Input Field — Focus

The following code example uses custom styles to demonstrate the :focus state on a .form-control element.

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control focus-example" name="email" placeholder="Email" value="" type="email">
</div>

Input Field — Valid

A valid input field is determined by the class .ng-valid. Validation is checked after a user has touched that field (indicated by the class .ng-touched).

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control ng-touched ng-valid" name="email" placeholder="Email" value="joe@dirt.com" type="email">
</div>

Input Field — Invalid

An invalid state on an input field is determined by the .ng-invalid class. Validation is checked after a user has touched that field (indicated by the class .ng-touched).

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control ng-touched ng-invalid" name="email" placeholder="Email" value="larry@" type="email">
</div>

Input Field — Invalid with Error Message

Email address required

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control ng-touched ng-invalid" name="email" placeholder="Email" value="larry@" type="email">
  <p class="error help-block">Email address required</p>
</div>

Input Field — Search

Adding a .searchbar class to an input's parent container will disable validation states on that input. In this example, we've included the class .ng-invalid to show how .searchbar will override the invalidation styles.

<form action="." class="searchbar ng-untouched ng-pristine ng-valid">
  <div class="form-group">
    <label class="sr-only" for="search">Search</label>
    <input class="form-control ng-touched ng-invalid" name="search" placeholder="Search" value="" type="text">
  </div>
</form>

Input Field — Default with Helper Text

Separate additional addresses with a comma

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control" name="email" placeholder="Email" value="" type="email">
  <p class="help-block">Separate additional addresses with a comma</p>
</div>

Input Field — Disabled

Disabled inputs prevent user interactions and appear lighter in color and add a not-allowed cursor.

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control" disabled="" name="email" placeholder="Email" value="" type="email">
</div>

Input Field — Read-only

Read-only inputs prevent modification of the input's value. Read-only inputs appear lighter, but keep the standard cursor.

<div class="form-group">
  <label class="sr-only" for="email">Email</label>
  <input class="form-control" name="email" placeholder="Email" readonly="" value="" type="email">
</div>