| Table of Contents |
|---|
...
The text area consists of:
Label - a meaningful label of what information the user needs to provide.
Input Field (the input field can display a hint text).
 |
States
State | Default | Filled |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused Hover |  |  |
Focused Active |  |  |
Interaction
Hover - hovering the text area will change the cursor to text cursor.
When text exists and the field is active -
Clicking the text area will place the cursor at the cursor position.
Double clicking a word inside the text area will select that word.
Triple clicking the text area will select the whole text in the text area, 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.
Non active - If no text was inserted, the hint text will be displayed again when the field will lose focus.
If a character limit was set, reaching the limit will prevent the user from keeping typing.
In special cases, the text area height will be increased manually, according to the length of the text.
Validations and errors
Please refer to Field validation page for more information.
A text area 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 Area <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">
<textarea class="form-control form-control-sm" placeholder="Guiding Text"></textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text"></textarea></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">
<textarea class="form-control form-control-sm" placeholder="Guiding Text">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea></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">
<textarea class="form-control form-control-sm" placeholder="Guiding Text" disabled></textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text" disabled></textarea></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">
<textarea class="form-control form-control-sm" placeholder="Guiding Text" disabled>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text" disabled>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea></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">
<textarea class="form-control form-control-sm" placeholder="Guiding Text" readonly></textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text" readonly></textarea></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">
<textarea class="form-control form-control-sm" placeholder="Guiding Text" readonly>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm" placeholder="Guiding Text" readonly>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea></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">
<textarea 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 an Error on the Text Area"></textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm is-invalid" placeholder="Guiding Text"></textarea></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">
<textarea 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 an Error on the Text Area">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea class="form-control form-control-sm is-invalid" placeholder="Guiding Text">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea></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">
<textarea 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 a Warning on the Text Area"></textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea 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 a Warning on the Text Area"></textarea></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">
<textarea 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 a Warning on the Text Area">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><textarea 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 a Warning on the Text Area">Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea. Stet explicari in ius, eu sanctus intellegat mea. Mazim atomorum his te, idque nihil percipit an cum.</textarea></script></code></pre>
</div>
</div>
</form>
</div>
</div> |
...