...

Table of Contents

Description

Status

colour	Yellow
title	Ongoing

A text field is a single-line text input control used to allow users to enter small amount of text or numeric data in one line.

Types

...

Type

...

Usage

...

Basic text field

...

The most common input field in which the user can insert text or numeric data

...

Secured field

...

Used when text should be secured

Usage & Behavior

General guidelines

Structure

The text field 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 field will change the cursor to a text cursor.
Active -
- Clicking the text field will place the cursor at the cursor position and the hint text will disappear.
- Double clicking a word inside the text field will select that word.
- Triple clicking the text field will select the whole text in the text field, if exists.
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.

When used as a secured field, for example - password, the characters are hidden, also when typing (displayed as dots).
Image Removed

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:

...

A text field with an error will have a red border and an error icon, as displayed below:

...

Best practices

Use the text field if:
- The user needs to enter a short, single-line text (plain text, password, URL, phone number, or email address) or number.

Do not use the text field if:
- The user needs to enter dates and times. In this case, use a Date Picker or a Time Picker.
- The user needs to enter long texts. In this case, use a Text Area.
- The user needs to perform a search. In this case, use a Search Field.
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.
Proactively guide users to prevent errors. Help them to identify and fix errors as they occur.
When filling a secured text field, allow the user to temporarily view the inserted input.

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

...

Table of Contents

Description

A text field is a single-line text input control. It allows users to enter a small amount of text or numeric data in one line.

...

Types

Type	Usage
Basic text field	The most common input field, where users can enter text or numeric data.
Secured text field	Used when text needs to be secured, e.g., password.

Usage & Behavior

General guidelines

Structure

The text field consists of:

Preceding label - a meaningful label describing the information the user needs to provide.
Input Field.
Guiding / hint text (optional) - a short description of the expected input text, shown within the input field.
A show/hide password button (secured text fields only, optional).

...

States

State	Default	Filled
Regular	Image Added	Image Added
Hover	Image Added	Image Added
Active	Image Added	Image Added
Disabled	Image Added	Image Added
Read Only	Image Added	Image Added
Error	Image Added	Image Added
Warning	Image Added	Image Added
Focused	Image Added	Image Added
Focused, Hover	Image Added	Image Added
Focused, Active	Image Added	Image Added
Focused, Disabled	Image Added	Image Added

Interaction

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.
- Text characters may be masked (secured text field only).
  Image Added
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.

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:

...

A text field 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.
Numeric-only text fields will prevent any characters other than numbers from being entered.
When Caps lock or Num lock are on, secured text fields (e.g. password) will show a message warning to the user - see the Common Messages Repository for wording.

Best practices

Use:

where the user needs to enter a short, single-line text in plain text, such as a password, URL, phone number or email address.

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.

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.
When the user is filling in a secured text field, allow them to temporarily view the 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 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.

Design

Zeplin link	Screen thumbnail
https://zpl.io/aMW4dR2

Image Removed

Current appearances in our products

WFM → Calendar → Employee Filter

...

WFM → Queue Analytics → Create Statistics View

...

New LUX design

...

sanitize	false

...

Image Added

Code

Html macro

sanitize	false

<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

...

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>

Version	Old Version 13	New Version Current
Changes made by	dana lees kunik	Hasitha Jayarathne
Saved on	Jun 11, 2020	Dec 23, 2024

Content Comparison

Versions Compared

Key

Description

Types

Usage & Behavior

General guidelines

Structure

States

Interaction

Validations and errors

Best practices

Accessibility compliance

Design

Description

Types

Usage & Behavior

General guidelines

Structure

States

Interaction

Validations and errors

Best practices

Accessibility compliance

Focus management

Responsive design

Design

Current appearances in our products

New LUX design

Code