Inputs
Demonstration
Code
Inputs in the Opportunity Standard follow the usage guidelines of the U.S. Web Design System’s Text Input.
Inputs should always be paired with a Label Element using the Question Component.
Inputs should use a proper type corresponding with the information they are collecting. Supported types for Opportunity Standard Inputs include text, number, tel, email, url, and search.
Checkbox or Radio inputs are categorized as Options.
Demonstration
Code
Inputs may have a prefix or suffix UI Icon or text following usage guidelines from the U.S. Web Design System’s Input prefix or suffix. If using text for the prefix or suffix, it may be a maximum of 3 characters.
Input Masks are recommended to help users type commonly formatted types such as telephone numbers, following guidance from the U.S. Web Design System’s Input Mask.
The open source library Cleave.js is included as a dependency of the Opportunity Standard to provide input masking support.
Global Script
To initialize supported masking utilities for dollars and phone numbers from the global script use the following code:
<!-- Global Script --> <script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.masks(); </script>
Module Import
For module imports, import the mask utilities from the source and instantiate masks for dollars and phone numbers
import MaskDollars from '@nycopportunity/standard/src/utilities/mask/mask-dollars.js'; import MaskPhone from '@nycopportunity/standard/src/utilities/mask/mask-phone.js'; new MaskDollars new MaskPhone
Additional masking
To achieve additional masking support, import Cleave.js from the source and pass inputs to instances of Cleave and customize options.
import Cleave from 'cleave.js';
let inputs = document.querySelectorAll('[data-js="{{ MY_INPUT }}"]');
for (let i = 0; i < inputs.length; i++) {
new Cleave(inputs[i], {
// Custom Options
});
}
More information can be found in the Cleave.js documentation.