A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.
<nve-preferences-input
name="theme"
value='{ "color-scheme": "dark", "scale": "compact", "reduced-motion": "true" }'
></nve-preferences-input>
Installation
<script type="module">
import '@nvidia-elements/core/preferences-input/define.js';
</script>
<nve-preferences-input
name="theme"
value='{ "color-scheme": "dark", "scale": "compact", "reduced-motion": "true" }'
></nve-preferences-input>
nve api.get nve-preferences-input
Preferences Input is a form associated component and works within FormData.
Preferences input integrated with form submission, displaying live JSON value updates.
<form id="preferences-input-form" nve-layout="row gap:md">
<div nve-layout="column gap:md">
<nve-preferences-input name="theme" value='{ "color-scheme": "light" }'></nve-preferences-input>
<nve-button>submit</nve-button>
</div>
<pre></pre>
</form>
<script type="module">
const form = document.querySelector("form");
const preferencesInput = document.querySelector("nve-preferences-input");
const pre = document.querySelector("form pre");
form.addEventListener("change", renderValues);
form.addEventListener("input", renderValues);
form.addEventListener("submit", renderValues);
pre.innerText = JSON.stringify(preferencesInput.value, null, 2);
function renderValues(e) {
e.preventDefault();
console.log(e);
pre.innerText = JSON.stringify(preferencesInput.value, null, 2);
}
</script>
Dropdown
Preferences input embedded in a dropdown menu triggered from a page header settings button.
<nve-page-header>
<nve-logo slot="prefix" size="sm">NV</nve-logo>
<h2 slot="prefix" nve-text="heading sm">NVIDIA</h2>
<nve-icon-button slot="suffix" icon-name="gear" size="sm" popovertarget="preferences-input"></nve-icon-button>
</nve-page-header>
<nve-dropdown id="preferences-input" position="bottom" alignment="end">
<nve-preferences-input name="theme" value='{ "color-scheme": "dark" }'></nve-preferences-input>
</nve-dropdown>
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