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 placeholder="Optional Default Text" type="text">
<input placeholder="Optional Default Text" type="text">
<input disabled type="text">
<input class="adb-is-error" type="text">
Sizes
<input class="adb-text__small" placeholder="Optional Default Text" type="text">
<input placeholder="Optional Default Text" type="text">
<input class="adb-text__large" placeholder="Optional Default Text" type="text">
<input class="adb-text__xlarge" placeholder="Optional Default Text" type="text">
Text Sizes
Like Context Menus and Dropdown Selectors Single Line Text Inputs preserve the default outer height. The inner font-sizing will match the default sizing. This effect might be useful for emphasising indvidual input fields.
<input class="adb-text__sized_small" placeholder="Optional Default Text" type="text">
<input placeholder="Optional Default Text" type="text">
<input class="adb-text__sized_large" placeholder="Optional Default Text" type="text">
<input class="adb-text__sized_xlarge" placeholder="Optional Default Text" 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>