Heartwood

Text Input: Default 

<div class="text-input ">
    <div class="text-input__pre">
        <label class="text-input__label" for="email-address">Email Address</label>
    </div>
    <div class="text-input__inner">
        <input type="email" class="text-input__input" placeholder="johndoe@gmail.com" name="emailAddress" id="email-address" />
    </div>
    <p class="text-input__helper"></p>
</div>
 
<div class="text-input {{class}}">
	{{#if label}}
		{{> @input-pre }}
	{{/if}}
	{{> @input-inner }}
	{{> @input-helper}}
</div>
 
{
  "label": "Email Address",
  "placeholder": "johndoe@gmail.com",
  "type": "email",
  "id": "email-address",
  "name": "emailAddress"
}

Text Input

Text inputs allow users to input short text such as names, email addresses, and brief descriptions.

When to use:

Use a Text Input when asking for short text information with no limit of potential responses.

When not to use:

  • To ask for long text; instead use a Text Area
  • For phone numbers; instead use a Phone Input
  • For subdomain url’s; instead use a Domain Input
  • When the number of possible responses is limited; instead use a Select for few options, or an Autosuggest for many options.
  • To ask for discreet options; instead use a Checkbox or Radio input.