A textarea is a control that enables users to enter and edit text.
<nve-textarea>
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea> <nve-textarea>
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
label message
Installation <script type="module">
import '@nvidia-elements/core/textarea/define.js';
</script>
<nve-textarea>
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<script type="module">
import '@nvidia-elements/core/textarea/define.js';
</script>
<nve-textarea>
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
nve api.get nve-textareanve api.get nve-textarea
Layout Controls the directional arrangement and spacing behavior of the element's content.
Layout Description vertical Arranges content in a vertical stack with block-level spacing. vertical-inline Arranges content vertically with compact inline spacing for dense layouts. horizontal Arranges content in a horizontal row with block-level spacing. horizontal-inline Arranges content horizontally with compact inline spacing. Vertical Textareas with vertical layout including validation states for disabled, success, and error.
<div nve-layout="column gap:lg full">
<nve-textarea>
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea>
<label>disabled</label>
<textarea disabled></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea>
<label>success</label>
<textarea></textarea>
<nve-control-message status="success">message</nve-control-message>
</nve-textarea>
<nve-textarea>
<label>error</label>
<textarea></textarea>
<nve-control-message status="error">message</nve-control-message>
</nve-textarea>
</div> <div nve-layout="column gap:lg full">
<nve-textarea>
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea>
<label>disabled</label>
<textarea disabled></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea>
<label>success</label>
<textarea></textarea>
<nve-control-message status="success">message</nve-control-message>
</nve-textarea>
<nve-textarea>
<label>error</label>
<textarea></textarea>
<nve-control-message status="error">message</nve-control-message>
</nve-textarea>
</div>
label message disabled message success message error message
Horizontal Textareas with horizontal layout showing validation states for inline forms and compact layouts.
<div nve-layout="column gap:lg full">
<nve-textarea layout="horizontal">
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea layout="horizontal">
<label>disabled</label>
<textarea disabled></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea layout="horizontal">
<label>success</label>
<textarea></textarea>
<nve-control-message status="success">message</nve-control-message>
</nve-textarea>
<nve-textarea layout="horizontal">
<label>error</label>
<textarea></textarea>
<nve-control-message status="error">message</nve-control-message>
</nve-textarea>
</div> <div nve-layout="column gap:lg full">
<nve-textarea layout="horizontal">
<label>label</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea layout="horizontal">
<label>disabled</label>
<textarea disabled></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
<nve-textarea layout="horizontal">
<label>success</label>
<textarea></textarea>
<nve-control-message status="success">message</nve-control-message>
</nve-textarea>
<nve-textarea layout="horizontal">
<label>error</label>
<textarea></textarea>
<nve-control-message status="error">message</nve-control-message>
</nve-textarea>
</div>
label message disabled message success message error message
Columns and Rows Textarea with custom columns and rows attributes for controlling initial size and dimensions.
<nve-textarea>
<label>label</label>
<textarea rows="15" cols="40"></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea> <nve-textarea>
<label>label</label>
<textarea rows="15" cols="40"></textarea>
<nve-control-message>message</nve-control-message>
</nve-textarea>
label message
Release Status All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days