Control Actions
Text type controls support prefix and suffix labeling as well as action buttons.
Installation
import '@nvidia-elements/core/input/define.js';
<nve-input>
<label>label</label>
<input type="text" />
<nve-icon-button icon-name="cancel" container="flat" aria-label="clear"></nve-icon-button>
</nve-input>
Actions
Input with action buttons for search and clear, providing quick access to common operations.
<nve-input>
<label>label</label>
<nve-icon-button icon-name="search" container="flat" readonly></nve-icon-button>
<input type="text" />
<nve-icon-button icon-name="cancel" container="flat" aria-label="clear"></nve-icon-button>
<nve-control-message>message</nve-control-message>
</nve-input>
Label Action
Label with an information button to provide contextual help or more details about the field.
<nve-input>
<label>label</label>
<nve-icon-button
icon-name="information-circle-stroke"
container="flat"
aria-label="more details"
slot="label"
></nve-icon-button>
<input type="text" />
<nve-control-message>message</nve-control-message>
</nve-input>
Prefix/Suffix
Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.
<nve-input>
<label>label</label>
<nve-button container="flat" readonly>https://</nve-button>
<input type="text" />
<nve-button container="flat" readonly>.com</nve-button>
<nve-control-message>message</nve-control-message>
</nve-input>