<!-- 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>
<!-- Small -->
<div class="text-input text-input-small">
<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>
<!-- With Helper -->
<div class="text-input ">
<div class="text-input__pre">
<label class="text-input__label" for="first-name">First Name</label>
</div>
<div class="text-input__inner">
<input type="text" class="text-input__input" placeholder="Pat" name="firstName" id="first-name" />
</div>
<p class="text-input__helper">We use this information to improve your shopping experience</p>
</div>
<!-- With Error -->
<div class="text-input text-input--has-error">
<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" value="jon ronson" name="emailAddress" id="email-address" />
</div>
<p class="text-input__helper">Please include a valid email address</p>
</div>
<!-- Read Only -->
<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" value="hello@sprucelabs.ai" name="emailAddress" id="email-address" readonly />
</div>
<p class="text-input__helper"></p>
</div>
<div class="text-input {{class}}">
{{#if label}}
{{> @input-pre }}
{{/if}}
{{> @input-inner }}
{{> @input-helper}}
</div>
/* Default */
{
"label": "Email Address",
"placeholder": "johndoe@gmail.com",
"type": "email",
"id": "email-address",
"name": "emailAddress"
}
/* Small */
{
"label": "Email Address",
"placeholder": "johndoe@gmail.com",
"type": "email",
"id": "email-address",
"name": "emailAddress",
"class": "text-input-small"
}
/* With Helper */
{
"label": "First Name",
"placeholder": "Pat",
"type": "text",
"id": "first-name",
"name": "firstName",
"helper": "We use this information to improve your shopping experience"
}
/* With Error */
{
"label": "Email Address",
"placeholder": "johndoe@gmail.com",
"type": "email",
"id": "email-address",
"name": "emailAddress",
"class": "text-input--has-error",
"value": "jon ronson",
"error": "Please include a valid email address"
}
/* Read Only */
{
"label": "Email Address",
"placeholder": "johndoe@gmail.com",
"type": "email",
"id": "email-address",
"name": "emailAddress",
"value": "hello@sprucelabs.ai",
"readonly": true
}
Text inputs allow users to input short text such as names, email addresses, and brief descriptions.
Use a Text Input when asking for short text information with no limit of potential responses.