A file picker is a control that enables users to choose a file value.
Installation
<script type="module">
import '@nvidia-elements/core/file/define.js';
</script>
<nve-file>
<label>file</label>
<input type="file" />
<nve-control-message>message</nve-control-message>
</nve-file>
<script type="module">
import '@nvidia-elements/core/file/define.js';
</script>
<nve-file>
<label>file</label>
<input type="file" />
<nve-control-message>message</nve-control-message>
</nve-file>
nve api.get nve-file
nve api.get nve-file
Vertical
Vertical layout file inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.
<div nve-layout="column gap:lg align:stretch">
<nve-file>
<label>label</label>
<input type="file" />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file>
<label>disabled</label>
<input type="file" disabled />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file>
<label>success</label>
<input type="file" />
<nve-control-message status="success">message</nve-control-message>
</nve-file>
<nve-file>
<label>error</label>
<input type="file" />
<nve-control-message status="error">message</nve-control-message>
</nve-file>
</div>
<div nve-layout="column gap:lg align:stretch">
<nve-file>
<label>label</label>
<input type="file" />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file>
<label>disabled</label>
<input type="file" disabled />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file>
<label>success</label>
<input type="file" />
<nve-control-message status="success">message</nve-control-message>
</nve-file>
<nve-file>
<label>error</label>
<input type="file" />
<nve-control-message status="error">message</nve-control-message>
</nve-file>
</div>
Horizontal
Horizontal layout file inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.
<div nve-layout="column gap:lg align:stretch">
<nve-file layout="horizontal">
<label>label</label>
<input type="file" />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file layout="horizontal">
<label>disabled</label>
<input type="file" disabled />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file layout="horizontal">
<label>success</label>
<input type="file" />
<nve-control-message status="success">message</nve-control-message>
</nve-file>
<nve-file layout="horizontal">
<label>error</label>
<input type="file" />
<nve-control-message status="error">message</nve-control-message>
</nve-file>
</div>
<div nve-layout="column gap:lg align:stretch">
<nve-file layout="horizontal">
<label>label</label>
<input type="file" />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file layout="horizontal">
<label>disabled</label>
<input type="file" disabled />
<nve-control-message>message</nve-control-message>
</nve-file>
<nve-file layout="horizontal">
<label>success</label>
<input type="file" />
<nve-control-message status="success">message</nve-control-message>
</nve-file>
<nve-file layout="horizontal">
<label>error</label>
<input type="file" />
<nve-control-message status="error">message</nve-control-message>
</nve-file>
</div>
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