Expand

title	Expand for table of Content
order	update

Table of Contents

outline	true
style	square

Description

Status


colour	Yellow
title	Ongoing

A text area is a multi-line text input control. Use these to allow user's to enter large bodies of text data such as object descriptions.

Expand

title	Expand for more info
order	update

TBD

Related items:

Lorem ipsum dolor si

Behavior

If it is disabled, the cursor will indicate that the selection cannot be made.

Content guidelines

TBD

Current appearances in our products

ExpandtitleExpand to view products and screenshotsorderupdate

Usage & Behavior

General guidelines

Use the text area if you want users to enter multiple lines of text. If you only want them to enter a single line of text, use the t ext field instead.

Always provide a meaningful label for any input field, and use the least complex control (such as select instead of value help). Use more intricate controls only if the use case really requires it. Where appropriate, help users by providing mask input or hint texts.

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. A hint text in the text field represents an example of what you want the user to enter. This will be overwritten as soon as the user starts typing.

New LUX design

Html macro

sanitize	false

<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 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>
				</form>
			</div>
		</div>

...

Version	Old Version 8	New Version 9
Changes made by	Femi	dana lees kunik
Saved on	Dec 04, 2018	May 02, 2019

Content Comparison

Versions Compared

Key