<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>
{
"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.