An input is a control that enables users to enter text.
Installation
<script type="module">
import '@nvidia-elements/core/input/define.js';
</script>
<nve-input>
<label>label</label>
<input type="text" />
<nve-control-message>message</nve-control-message>
</nve-input>
<script type="module">
import '@nvidia-elements/core/input/define.js';
</script>
<nve-input>
<label>label</label>
<input type="text" />
<nve-control-message>message</nve-control-message>
</nve-input>
nve api.get nve-input
nve api.get nve-input
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
Text inputs with vertical layout including validation states for disabled, success, and error.
<div nve-layout="column gap:lg full">
<nve-input>
<label>label</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input>
<label>disabled</label>
<input disabled />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input>
<label>success</label>
<input />
<nve-control-message status="success">message</nve-control-message>
</nve-input>
<nve-input>
<label>error</label>
<input />
<nve-control-message status="error">message</nve-control-message>
</nve-input>
</div>
<div nve-layout="column gap:lg full">
<nve-input>
<label>label</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input>
<label>disabled</label>
<input disabled />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input>
<label>success</label>
<input />
<nve-control-message status="success">message</nve-control-message>
</nve-input>
<nve-input>
<label>error</label>
<input />
<nve-control-message status="error">message</nve-control-message>
</nve-input>
</div>
Horizontal
Text inputs with horizontal layout showing validation states for inline forms and compact layouts.
<div nve-layout="column gap:lg full">
<nve-input layout="horizontal">
<label>label</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input layout="horizontal">
<label>disabled</label>
<input disabled />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input layout="horizontal">
<label>success</label>
<input />
<nve-control-message status="success">message</nve-control-message>
</nve-input>
<nve-input layout="horizontal">
<label>error</label>
<input />
<nve-control-message status="error">message</nve-control-message>
</nve-input>
</div>
<div nve-layout="column gap:lg full">
<nve-input layout="horizontal">
<label>label</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input layout="horizontal">
<label>disabled</label>
<input disabled />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-input layout="horizontal">
<label>success</label>
<input />
<nve-control-message status="success">message</nve-control-message>
</nve-input>
<nve-input layout="horizontal">
<label>error</label>
<input />
<nve-control-message status="error">message</nve-control-message>
</nve-input>
</div>
Rounded
Flat
Fit Content
Sets the input to match native default content block
FitContent Description true false Fit Text
Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select)
FitText Description true false 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