| Table of Contents |
|---|
...
The text area consists of:
Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
(Optional) Hint text - a short description of the expected input text, shown within the input field.
 |
States
State | Default | Filled |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
...
On hover over the text area, the mouse cursor will change to a text cursor.
On click:
Where no text has been added to the text area:
A text cursor will appear at the beginning of the text area.
The hint text will disappear.
Where text already exists in the text area:
A text cursor will appear in the position where the user clicks.
Double-clicking a word inside the text area will select that word.
Triple-clicking the text area will select all of the text.
When the text area 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.
In special cases, the height of the text area will increase automatically in response to the amount of entered text.
Validations and errors
Please refer to the Field validation page for more information.
A text area with a warning will have an orange border and a warning icon, as shown 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">
</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>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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 disabled>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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 disabled>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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 readonly>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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 readonly>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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>Lorem ipsum dolor sit amet, id vis ubique cotidieque, ex malis commune mea.</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 amet, id vis ubique cotidieque, ex malis commune mea.</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> |