Description

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.

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

Verint LUX Design System > Text Field > image2019-4-17_16-52-31.png

Interaction

Hover - hovering the text field will change the cursor to 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 textfield 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.

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:

Verint LUX Design System > Text Field > image2019-4-17_16-54-27.png

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

Verint LUX Design System > Text Field > image2019-4-17_16-54-52.png

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.

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
https://zpl.io/aMW4dR2

Current appearances in our products

WFM → Calendar → Employee Filter

Verint LUX Design System > Text Field > image2020-5-13_14-25-5.png

WFM → Queue Analytics → Create Statistics View

Verint LUX Design System > Text Field > image2020-5-13_14-26-39.png

New LUX design

<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/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">

<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" value="Filled 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 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" value="Filled Text"></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>