| Table of Contents |
|---|
...
Type | Usage |
|---|---|
Basic text field | The most common input field. The user can insert text or numeric data, where users can enter text or numeric data. |
Numeric text field | A text field that can have only a numeric value, e.g., extension number. |
Secured text field | Used when text needs to be secured. , e.g., password. |
Usage & Behavior
...
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.
As text is entered it will appear from the left-hand side.
Once the cursor reaches the end of the field, it will stop and new characters will be added at that point. The start of the text string will disappear on the left-hand side of the field.
If a character limit has been set, reaching the limit will prevent the user from entering any more characters.
When the user clicks away and the field becomes inactive:
if the text string exceeds the width of the field, the start of the text string will come back into view.
if no text has been added the hint text will reappear.
added the hint text will reappear.
In case of a numeric text field (e.g., extension number), users will not be able to enter any character other than numbers.
In case of secured text field (e.g., 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).
...
Validations and errors
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:
...
where the user needs to enter a short, single-line text in plain text, such as a password, URL, phone number , or 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 increase or decrease a numeric value → use aNumeric Stepper.
the user needs to enter a lot of text → use a Text Area.
the user needs to perform a search → use a Search Field.
...
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
Where the available space is narrow:
the width of the text field should dynamically respond to its container, taking up 100% of the available space.
the label for the text area should be shown above the field, rather than to the left.
...
Zeplin link | Screen thumbnail |
|---|---|
  |
Code
| Html macro | ||
|---|---|---|
| ||
<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>
|
...