DefaultStandardVerticalHorizontalRoundedFitTextFitContentFlatSearchClearLabelActionPrefixSuffix
An input is a control that enables users to enter text.
Text input with the standard input structure, label, and control message.
<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>
Edit Example
Text inputs with vertical layout including validation states for disabled, success, and error.
<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>
Edit Example
Text inputs with horizontal layout showing validation states for inline forms and compact layouts.
Sets the rounded visual style of the input.
Rounded Description true false
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
Sets the input to match native default content block
FitContent Description true false
Text input with flat container styling for minimal visual appearance and borderless design.
<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>
Edit Example
Input with action buttons for search and clear, providing quick access to common operations.
<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>
Edit Example
Label with an information button to provide contextual help or more details about the field.
<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>
Edit Example
Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.