State
Default
Filled
Regular
Hover
Active
Disabled
Read Only
Error
Warning
Focused
Focused, Hover
Focused, Active
Focused, Disabled
A text field is a single-line text input control. It allows users to enter a small amount of text or numeric data in one line.
Type | Usage |
|---|---|
Basic text field | The most common input field. The user can insert text or numeric data. |
Secured text field | Used when text needs to be secured. e.g. password. |
The text field consists of:
Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
(Optional) Guiding / hint text - a short description of the expected input text, shown within the input field.
State | Default | Filled |
|---|---|---|
Regular | | |
Hover | | |
Active | | |
Disabled | | |
Read Only | | |
Error | | |
Warning | | |
Focused | | |
Focused, Hover | | |
Focused, Active | | |
Focused, Disabled | | |
On hover over the text field, the mouse cursor will change to a text cursor.
On click:
Where no text has been added to the field:
a text cursor will appear at the beginning of the text field.
the hint text will disappear.
Where text already exists in the field:
a text cursor will appear in the position where the user clicks.
double-clicking a word inside the text field will select that word.
triple-clicking the text field will select all of the text.
When the text field becomes inactive (user clicks away) the hint text will reappear, if no other text has been added.
If a character limit has been set, reaching the limit will prevent the user from entering any more characters.
For secured fields (such as password):
When typing, characters are masked.
The field can contain a show/hide password button.
In case Caps lock or Num lock are on, a corresponding tooltip will appear (see Common Messages Repository).
 |
Please refer to the Field Validation page for more information.
A text field with a warning will have an orange border and a warning icon, as shown below:
A text field with an error will have a red border and an error icon, as shown below:
The orange or red border will be removed when the content is updated and becomes valid.
Use:
where the user needs to enter a short, single-line text in plain text, such as a password, URL, phone number, email address, or a number.
Don’t use if:
the user needs to enter dates and times → use a Date Picker or a Time Picker.
the user needs to enter a lot of text → use a Text Area.
the user needs to perform a search → use a Search Field.
General
Always provide a clear and meaningful preceding Label for any input field.
Where appropriate, help users by providing a guiding/hint text describing the expected input text.
When the user is filling in a secured text field, allow them to temporarily view the text.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Keyboard | Description |
|---|---|
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | Acts as within a text input. |
Enter | Acts as within a text input. |
Esc | N/A |
Arrows | Acts as within a text input. |
Mouse | Description |
|---|---|
Right click | Set Focus state on component |
Zeplin link | Screen thumbnail |
|---|---|
 |
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip({trigger: 'hover', delay: { "show": 100, "hide": 0 }});
$('.is-invalid, .is-warning').on('shown.bs.tooltip', function () {
var x = $(this).offset().left + $(this).width();
var y = $(this).offset().top;
$('.bs-tooltip-right').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
});
})
</script>
<div class="card">
<div class="card-header">Text Field <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm" placeholder="Guiding Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm" placeholder="Guiding Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm" placeholder="Guiding Text" disabled>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm" placeholder="Guiding Text" disabled></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm" placeholder="Guiding Text" readonly>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm" placeholder="Guiding Text" readonly></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" data-toggle="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the Text Field">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm is-invalid" placeholder="Guiding Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text" data-toggle="tooltip" data-custom-class="input-error" data-placement="right" title="There is a Error on the Text Field">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Warning</label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm is-warning" placeholder="Guiding Text" data-toggle="tooltip" data-custom-class="input-warning" data-placement="right" title="There is a Warning on the Text Field">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm is-warning" placeholder="Guiding Text" data-toggle="tooltip" data-custom-class="input-warning" data-placement="right" title="There is a Warning on the Text Field"></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
<div class="col-lg-4">
<input type="text" class="form-control form-control-sm is-warning" placeholder="Guiding Text" value="Filled Text" data-toggle="tooltip" data-custom-class="input-warning" data-placement="right" title="There is an Warning on the Text Field">
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><input type="text" class="form-control form-control-sm is-warning" placeholder="Guiding Text" value="Filled Text" data-toggle="tooltip" data-custom-class="input-warning" data-placement="right" title="There is an Warning on the Text Field"></script></code></pre>
</div>
</div>
</form>
</div>
</div>
|