| Table of Contents | ||||
|---|---|---|---|---|
|
Description
| Status | ||||
|---|---|---|---|---|
|
A text area is a multi-line text input control.
Used when the expected user input is long.
Usage & Behavior
General guidelines
Structure
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
...
Interaction
Hover - hovering the text area will change the cursor to text cursor.
Focus -
focusing the text area will place the cursor at the focus position and the hint text will disappear.
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.
Focus out - 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.
Text areas have a fixed height. A vertical scroll is added when the cursor reaches the bottom of the field.
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:
...
A text area with an error will have a red border and an error icon, as displayed below:
...
The orange/red border will be removed when the content is updated to a valid.
Best practices
For short input, use the text field component.
Always provide a clear and meaningful label for any input field.
Where appropriate, help users by providing hint texts which describes the expected value of the field.
Text areas should indicate their state - enabled/disabled, empty/filled, valid/invalid.
Provide an indicator when the field is required.
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Design
...
Zeplin link
...
Screen thumbnail
...
...
Current appearances in our products
WFM → Queue Analytics → Create Statistics View
...
New LUX design
...
| sanitize | false |
|---|
...
| Table of Contents |
|---|
Description
A text area is a multi-line text input control. It is used where the user is expected to enter a lot of text.
...
Usage & Behavior
General guidelines
Structure
The text area 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.
(Optional) A character count, where there is a restrictive limit to the amount of text which can be entered. The count shows:
the number of characters currently entered in the text field, and
the maximum number of characters allowed.
...
States
State | Default | Filled |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Disabled |  |  |
Read-Only |  |  |
Error |  |  |
Warning |  |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Interaction
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), if no text has been added the hint text will reappear.
The character count will increase as text is entered. (See Validations and errors below for when the character limit is reached).
In special cases, the height of the text area will increase automatically in response to the amount of entered text.
A vertical scrollbar may be used where the user enters more lines of text than the text area can show.
...
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:
...
A text area 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.
Character count
When the character count is reached, the count of the characters currently entered in the text area will become red and bold.
The user should not be stopped from entering more characters when the limit is reached.
...
Best practices
Use:
where the user only needs to enter a large amount of text
Don’t Use:
where the user only needs to enter a short amount of text → use a Text Field.
Horizontal scroll should not be used within text areas.
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.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
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 |
Responsive design
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 area 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.
Design
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 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.</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.</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.</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.</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.</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.</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.</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.</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.</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 |
...
.</textarea></script></code></pre>
</div>
</div>
</form>
|
...
|
...
</div> |
...