Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
Installation
import '@nvidia-elements/core/forms/define.js';
The <nve-control> element is the base control that the <nve-* form controls extend. It works for generic input type as well as custom or third party form controls.
Responsive
All control elements are responsive and adjust to one of the set layouts based on the available space.
The element breakpoints use the available space to the element rather than the viewport.
Responsive form controls with layout adaptation in resizable containers.
<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>
Prominence Muted
Use the prominence muted state to lower visual weight of controls in forms.
<div nve-layout="row gap:lg">
<div nve-layout="column gap:lg pad:lg">
<nve-radio-group prominence="muted">
<label>label</label>
<nve-radio>
<label>radio 1</label>
<input type="radio" checked />
</nve-radio>
<nve-radio>
<label>radio 2</label>
<input type="radio" />
</nve-radio>
<nve-radio>
<label>radio 3</label>
<input type="radio" />
</nve-radio>
</nve-radio-group>
<nve-checkbox-group prominence="muted">
<label>label</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
</nve-checkbox-group>
<nve-switch-group prominence="muted">
<label>label</label>
<nve-switch>
<label>switch 1</label>
<input type="checkbox" checked />
</nve-switch>
<nve-switch>
<label>switch 2</label>
<input type="checkbox" />
</nve-switch>
<nve-switch>
<label>switch 3</label>
<input type="checkbox" />
</nve-switch>
</nve-switch-group>
<nve-range prominence="muted">
<label>label</label>
<input type="range" />
</nve-range>
</div>
<nve-card>
<nve-card-content>
<div nve-layout="column gap:lg pad:lg">
<nve-radio-group prominence="muted">
<label>label</label>
<nve-radio>
<label>radio 1</label>
<input type="radio" checked />
</nve-radio>
<nve-radio>
<label>radio 2</label>
<input type="radio" />
</nve-radio>
<nve-radio>
<label>radio 3</label>
<input type="radio" />
</nve-radio>
</nve-radio-group>
<nve-checkbox-group prominence="muted">
<label>label</label>
<nve-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</nve-checkbox>
<nve-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</nve-checkbox>
</nve-checkbox-group>
<nve-switch-group prominence="muted">
<label>label</label>
<nve-switch>
<label>switch 1</label>
<input type="checkbox" checked />
</nve-switch>
<nve-switch>
<label>switch 2</label>
<input type="checkbox" />
</nve-switch>
<nve-switch>
<label>switch 3</label>
<input type="checkbox" />
</nve-switch>
</nve-switch-group>
<nve-range prominence="muted">
<label>label</label>
<input type="range" />
</nve-range>
</div>
</nve-card-content>
</nve-card>
</div>
Custom Controls
Custom inputs work with and leverage the same form layouts and validation statuses as the built in controls.
Place the nve-control attribute on the element that is the custom input.
<nve-control>
<label>custom control</label>
<my-custom-form-control nve-control></my-custom-form-control>
<nve-control-message>message</nve-control-message>
</nve-control>
Many of the form controls wrap the native HTML form element or <input> element with the corresponding type attribute set.
<nve-input>
<label>label</label>
<input type="text" value="12345" />
</nve-input>
<nve-textarea>
<label>label</label>
<textarea value="123456789"></textarea>
</nve-textarea>
<nve-switch>
<label>label</label>
<input type="checkbox" checked />
</nve-switch>
<nve-range>
<label>label</label>
<input type="range" min="0" max="100" step="10" value="50" />
</nve-range>
But Elements includes Form Associated Elements which emit change / input
events and work with native HTML <form> validation and FormData submission.
On these elements, subscribe to event changes and set the value directly on the custom <nve-* elements rather than on an <input>:
<nve-resize-handle min="0" max="100" step="10" value="50"></nve-resize-handle>
<nve-preferences-input name="theme" value="{ 'theme': 'dark' }"></nve-preferences-input>
All form elements display the Form Control badge in the docs.
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