<!-- Text field -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="name" class="static-label">Name</label>
<input id="name" type="text" value="" class="form-control ms-text-field">
</div>
</div><!-- Outlined text field -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="name" class="static-label bg-white">Name</label>
<input id="name" type="text" value="" class="form-control ms-text-field-outline">
</div>
</div><!-- Text field with floating label -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="age" class="floating-label">Age</label>
<input id="age" type="text" value="" class="form-control ms-text-field">
</div>
</div><!-- Outlined text field with floating label -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="age" class="floating-label bg-white">Age</label>
<input id="age" type="text" value="" class="form-control ms-text-field-outline">
</div>
</div><!-- Text field with primary and accent colors -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="phone" class="floating-label">Phone</label>
<input id="phone" type="text" value="" class="form-control ms-text-field primary-blue-500 accent-pink-a400">
</div>
</div><!-- Outlined text field with primary and accent colors -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="phone" class="floating-label bg-white">Phone</label>
<input id="phone" type="text" value="" class="form-control ms-text-field-outline primary-blue-500 accent-pink-a400">
</div>
</div><div class="form-group">
<div class="ms-text-field-wrapper">
<label class="floating-label">City</label>
<input type="text" class="form-control ms-text-field animate-left" value="">
</div>
</div><div class="form-group">
<div class="ms-text-field-wrapper">
<label class="floating-label">State</label>
<input type="text" class="form-control ms-text-field animate-right" value="">
</div>
</div><!-- Text field with help block -->
<div class="form-group has-error">
<div class="ms-text-field-wrapper">
<label for="email" class="floating-label">Email</label>
<input id="email" type="email" value="someone@example.com"
class="form-control ms-text-field">
<span class="help-block">These credentials do not match our records.</span>
</div>
</div>
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="password" class="floating-label">Password</label>
<input id="password" type="password" value="******"
class="form-control ms-text-field">
</div>
</div><!-- Outlined text field with help block -->
<div class="form-group has-error">
<div class="ms-text-field-wrapper">
<label for="email" class="floating-label bg-white">Email</label>
<input id="email" type="email" value="someone@example.com"
class="form-control ms-text-field-outline">
<span class="help-block">These credentials do not match our records.</span>
</div>
</div>
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="password" class="floating-label bg-white">Password</label>
<input id="password" type="password" value="******"
class="form-control ms-text-field-outline">
</div>
</div><!-- Text area -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="comment" class="floating-label">Comments</label>
<textarea class="form-control ms-text-field" rows="3" id="comment"></textarea>
</div>
</div><!-- Outlined text area -->
<div class="form-group">
<div class="ms-text-field-wrapper">
<label for="comment" class="floating-label bg-white">Comments</label>
<textarea class="form-control ms-text-field-outline" rows="3" id="comment"></textarea>
</div>
</div><!-- Text field with icon -->
<div class="form-group">
<div class="ms-text-field-wrapper text-field-with-icon">
<div class="icon-left">
<i class="material-icons">account_box</i>
</div>
<label for="username" class="static-label">Username</label>
<input id="username" type="text" value="" class="form-control ms-text-field">
</div>
</div><!-- Outlined text field with icon -->
<div class="form-group">
<div class="ms-text-field-wrapper text-field-with-icon">
<div class="icon-left">
<i class="material-icons">account_box</i>
</div>
<label for="username" class="static-label bg-white">Username</label>
<input id="username" type="text" value="" class="form-control ms-text-field-outline">
</div>
</div><!-- Text field with icon and floating label -->
<div class="form-group">
<div class="ms-text-field-wrapper text-field-with-icon">
<div class="icon-left">
<i class="material-icons">vpn_key</i>
</div>
<label for="password" class="floating-label">Password</label>
<input id="password" type="password" value="" class="form-control ms-text-field">
</div>
</div><!-- Outlined text field with icon and floating label -->
<div class="form-group">
<div class="ms-text-field-wrapper text-field-with-icon">
<div class="icon-left">
<i class="material-icons">vpn_key</i>
</div>
<label for="password" class="floating-label bg-white">Password</label>
<input id="password" type="password" value="" class="form-control ms-text-field-outline">
</div>
</div><!-- Text field with icon in right -->
<div class="form-group">
<div class="ms-text-field-wrapper text-field-with-icon">
<div class="icon-right">
<i class="material-icons">keyboard</i>
</div>
<label for="pin" class="floating-label">Pin</label>
<input id="pin" type="password" value="" class="form-control ms-text-field">
</div>
</div><!-- Outlined text field with icon in right -->
<div class="form-group">
<div class="ms-text-field-wrapper text-field-with-icon">
<div class="icon-right">
<i class="material-icons">keyboard</i>
</div>
<label for="pin" class="floating-label bg-white">Pin</label>
<input id="pin" type="password" value="" class="form-control ms-text-field-outline">
</div>
</div>