Input Text
Input Text enable users to enter free-form text data. It can be used for long and short-form entries. The default Input Text is for short, one-line content.
When to use
- A user needs to input unique information that cannot be predicted with a preset of options.
- A user needs to input memorable data that can be entered more quickly in a free-hand format versus a more complex control.
Guidelines
- Provide clear, always visible labels for each input field.
- Use short and descriptive labels (a word or two) so users can quickly scan it.
- Text boxes should be big enough so that most field values are visible.
- Use hint text to help users fill in fields. They can provide instructions for expected values or formatting help.
- The required fields and instructions should be made clear to all users.
- All inputs will require a relevant string property to bind to.
Basic
Input Text is used as a controlled input with type=”text” attribute.
<div class="mb-3">
<label for="first-name" class="form-label">First name</label>
<input type="text" class="form-control" id="first-name">
</div>
Sizes
Apply form-control-sm to reduce the size of the input element or form-control-lg to enlarge it.
<input class="form-control form-control-sm mb-3" type="text" placeholder="Small" aria-label=".small">
<input class="form-control mb-3" type="text" placeholder="Medium" aria-label="medium">
<input class="form-control form-control-lg" type="text" placeholder="Large" aria-label=".large">
Icons
Icons can be placed inside an input element by wrapping both the input and the icon with input-icon-left or either input-icon-right class.
<label for="search-left" class="form-label">Search</label>
<div class="input-icon-left">
<i class="ds ds-search"></i>
<input type="text" class="form-control" id="search-left">
</div>
<label for="email-address" class="form-label">Email</label>
<div class="input-icon-right">
<i class="ds ds-mail"></i>
<input type="text" class="form-control" id="email-address">
</div>
Help Text
An advisory text can be defined with the semantic small tag.
Enter your username
<label for="username" class="form-label">Search</label>
<input class="form-control" id="username" aria-describedby="username-help" type="text" placeholder="Medium">
<small class="form-control-helptext" id="username-help">Enter your username</small>
Invalid
The 'invalid' class is used to add an invalid state style to indicate a failed validation.
This field is mandatory
<label for="first-name" class="form-label">First name<span class="asterisk">*</span></label>
<input type="text" class="form-control invalid" id="first-name">
<div class="invalidtext-wrapper">
<span class="invalidtext">This field is mandatory</span>
</div>
Disabled
When disabled is present, the element cannot be edited.
<div class="mb-3">
<label for="first-name" class="form-label">First name</label>
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
</div>
Accessibility
- Input boxes should have a clear visible focus.
- The <label> has the universal browser and screen reader support.
- Mouse users can click the label to focus on its input control.
- Using the help text will add an "aria-describedby" attribute to associate descriptive text to the form control.
- If semantic code is not used for label then aria-label can be provided for the screen reader to read.