• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Forms

Help users add and edit data

Text Inputs
Search Inputs
Option Selectors
Upload
Form Layout
Form Types
Errors & Validation

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.

  • URL Address
  • Email Address
  • Password
  • Telephone Number
  • Integer Number
  • Date
<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

  • Small
  • Medium / Default
  • Large
  • X-Large
<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.

  • Small
  • Medium / Default
  • Large
  • X-Large
<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>
  • Framework
  • Forms
  • Text Inputs
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%