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.