{{ aspExample({ code: "<div class=\"form__group\" id=\"text-input-example-1\">
<label class=\"form__label\" for=\"text-input-example-1-text-input\">First name</label>
<input class=\"form__input\" id=\"text-input-example-1-text-input\" type=\"text\">
</div>", nunjucks: "", title: "", id: "65a930778d349", url: "" }) }}
When JavaScript is enabled, the message should be “You have XX characters remaining”. This will tailor to interactions / prepopulated content on page load. Default (JavaScript disabled) message “You can enter up to XX characters”.
Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.
This component can be added within a conditional question.
Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the textarea component.
You should align labels above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.
Do not use placeholder text in place of a label, or for hints or examples, as:
Use of the autocomplete attribute should be considered very carefully. Due to the nature of the information being collected, the default for autocomplete is to set it to off, reducing the risk of exposing sensitive information.
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.