<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>
<div class="text-input {{class}}">
{{#if label}}
{{> @input-pre }}
{{/if}}
{{> @input-inner }}
{{> @input-helper}}
</div>
{
"label": "First Name",
"placeholder": "Pat",
"type": "text",
"id": "first-name",
"name": "firstName",
"helper": "We use this information to improve your shopping experience"
}
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.