Default Responsive Layout RequiredField NoLabelControl InlineControl Group DateControl TextareaControl Datalist Status
Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
<div
nve-layout="column gap:lg"
style="padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px"
>
<nve-input layout="horizontal">
<label>text label</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-input>
<nve-select layout="horizontal">
<label>select label</label>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<nve-control-message>message</nve-control-message>
</nve-select>
<nve-search layout="horizontal-inline">
<label>search label</label>
<input type="search" placeholder="search" />
</nve-search>
<nve-checkbox-group layout="horizontal-inline">
<label>checkbox label</label>
<nve-checkbox>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-checkbox>
<nve-checkbox>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-checkbox>
<nve-checkbox>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-checkbox>
<nve-control-message>message</nve-control-message>
</nve-checkbox-group>
<nve-range layout="horizontal-inline">
<label>label</label>
<input type="range" />
<nve-control-message>message</nve-control-message>
</nve-range>
<nve-textarea layout="horizontal-inline">
<label>label</label>
<textarea></textarea>
</nve-textarea>
</div>
Edit Example
Responsive form controls with layout adaptation in resizable containers.
<style>
#control-layout {
display: flex;
gap: 48px;
flex-direction: column;
min-width: 300px;
nve-control {
outline: 1px solid red;
}
nve-control-group {
outline: 1px solid blue;
}
}
</style>
<div id="control-layout">
<nve-control>
<label>vertical</label>
<input />
</nve-control>
<nve-control>
<label>vertical</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-control>
<nve-control layout="horizontal">
<label>horizontal</label>
<input />
</nve-control>
<nve-control layout="horizontal">
<label>horizontal</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-control>
<nve-control-group layout="vertical">
<label>vertical</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
<nve-control-message>message</nve-control-message>
</nve-control-group>
<nve-control-group layout="vertical">
<label>vertical</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
</nve-control-group>
<nve-control-group layout="vertical-inline">
<label>vertical-inline</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
<nve-control-message>message</nve-control-message>
</nve-control-group>
<nve-control-group layout="vertical-inline">
<label>vertical-inline</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
</nve-control-group>
<nve-control-group layout="horizontal">
<label>horizontal</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
<nve-control-message>message</nve-control-message>
</nve-control-group>
<nve-control-group layout="horizontal">
<label>horizontal</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
</nve-control-group>
<nve-control-group layout="horizontal-inline">
<label>horizontal-inline</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
<nve-control-message>message</nve-control-message>
</nve-control-group>
<nve-control-group layout="horizontal-inline">
<label>horizontal-inline</label>
<nve-control>
<label>local</label>
<input type="checkbox" name="checkbox-group" value="1" checked />
</nve-control>
<nve-control>
<label>staging</label>
<input type="checkbox" name="checkbox-group" value="2" />
</nve-control>
<nve-control>
<label>production</label>
<input type="checkbox" name="checkbox-group" value="3" />
</nve-control>
</nve-control-group>
</div>
Edit Example
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.
Form control with HTML5 validation showing required field error messaging.
Form control without visible label using aria-label for accessibility in compact layouts.
Inline control layout with checkbox positioned before its label for toggle-style inputs.
Control group organizing related radio buttons and checkboxes with shared label and messaging.
Form control wrapping a native date input with label and message support.
Textarea Control
test-case
<nve-control>
<label>about</label>
<textarea></textarea>
<nve-control-message>message</nve-control-message>
</nve-control>
about
message
Edit Example
Form control wrapping a textarea element for multi-line text input.
Form control with datalist providing autocomplete suggestions for search input.
<div nve-layout="column gap:md">
<nve-control>
<label>label</label>
<input />
<nve-control-message>message</nve-control-message>
</nve-control>
<nve-control>
<label>disabled</label>
<input disabled />
<nve-control-message>message</nve-control-message>
</nve-control>
<nve-control>
<label>success</label>
<input />
<nve-control-message status="success">message</nve-control-message>
</nve-control>
<nve-control>
<label>error</label>
<input />
<nve-control-message status="error">message</nve-control-message>
</nve-control>
</div>
Edit Example
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
Status Description warning Indicates cautionary actions that require careful consideration before proceeding. success Represents positive outcomes, confirmations, or constructive actions. error disabled