Text Inputs

Single Line Text Inputs

Types

It is important to use the appropriate type attribute for the following types of fields. Using HTML5 input types makes it easier to activate native browser validation and inputs. For example, in Mobile Safari, input type="email" activates an email-specific keyboard.

<input placeholder="e.g. http://www.domain.com" type="url">

<input placeholder="email@address.com" type="email">

<input type="password">

<input placeholder="415-555-555" type="tel">

<input max="100" min="0" placeholder="0" type="number">

<input type="date">

States 

<input type="text">

<input type="text">

<input disabled type="text">

<input class="adb-is-error" type="text">

Sizes

<input type="text">

<input class="adb-text__small" type="text">

Max-Length Count 

<input maxlength="15" type="text">

Borderless Text Inputs

States 
<input class="adb-text__borderless" placeholder="Optional Default Text" type="text">

<input class="adb-text__borderless adb-is-error" placeholder="Optional Default Text" type="text">

Multiple Line Text Areas

States 

<textarea></textarea>

<textarea></textarea>

<textarea disabled></textarea>

<textarea class="adb-is-error"></textarea>

Max-Length Count 

<textarea maxlength="999"></textarea>

Borderless Text Areas

States 
<textarea class="adb-textarea__borderless" placeholder="Optional Default Text"></textarea>

<textarea class="adb-textarea__borderless adb-is-error" placeholder="Optional Default Text"></textarea>