| Table of Contents |
|---|
...
State | Default | Filled |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled |  |  |
Interaction
Hover - hovering On hover over the text field, the mouse cursor will change the cursor to a text cursor.
When text exists and the field is active -
Clicking the text field will place the cursor at the cursor position.
Double On click:
Non active - If no text was inserted, the hint text will be displayed again, if exists, when the field will lose focusWhere no text has been inserted into the field:
A text cursor will appear at the beginning of the input field.
The hint text will disappear.
Where text already exists in the field:
A text cursor will appear in the place where the user clicked.
Double-clicking a word inside the text field will select
Triple clicking the text field will select the whole text in the text field, if exists.
When text was not inserted and the field is active -
Clicking the field will place the cursor at the beginning and the hint text will disappear.
that word.
Triple-clicking the text field will select all of the text.
Clicking away from the text field, if no text has been added, the hint text will reappear.
If a character limit was set, reaching the limit will prevent the user from keeping typing.
When used as a secured field (for example, password), the characters are hidden, also when typing (displayed as dots).
 |
Validations and errors
Please refer to Field validation page for more information.
A text field with a warning will have an orange border and a warning icon, as displayed below:
...
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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>
|
...