Versions Compared

Version Old Version 7 New Version 8
Changes made by

Femi

Femi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Expand
titleExpand for table of Content
orderupdate
Table of Contents
outlinetrue
stylesquare

Description

Status
colourYellow
titleOngoing
 

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
titleExpand for more info
orderupdate

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


Expand
titleExpand to view products and screenshots
orderupdate





New LUX design 


Html macro
sanitizefalse
<link rel="stylesheet" href="httphttps://bfs-eng-de-03.kana-testux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="httphttps://bfs-eng-de-03.kana-testux.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="httphttps://bfs-eng-de-03.kana-testux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="httphttps://bfs-eng-de-03.kana-testux.verint.com/bootstrap-4.0.0/dist/other/prism.minaccessibility.js"></script>
<link<script relsrc="stylesheet" href="httphttps://bfs-eng-de-03.kana-testux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<script src="http://bfs-eng-de-03.kana-testjs"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-hidecoy.min.jscss"></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">
							<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>

...