As of January 3rd, 2023 the Working NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Forms
Demonstration
Markup
<form> <div class="fieldset"> <label class="label">Input</label> <div class="input"> <!--{ @required required="true" specifies wether the input is required by a form }--> <!--{ @pattern pattern="{{ my regular expression }}" a regular expression the input's value must match in order to validate }--> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <input id="9aef508f0fb4b" name="input['9aef508f0fb4b']" required="true" type="text" /> </div> </div> <div class="fieldset"> <label class="legend">Select</label> <div class="select "> <select id="dbba25faa474c" name="select['dbba25faa474c']" required="true"> <option selected="true" value="">Select an option</option> </select> <svg aria-hidden="true" class="select__graphic"> <use href="#select-wnyc-chevrons"></use> </svg> </div> </div> <fieldset> <legend>True or False</legend> <!--{ @for Should match the id of the input }--> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <label class="option " for="a98d95f50bdf3"> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <input id="a98d95f50bdf3" name="boolean" type="radio" value="true" /> <span class="option__base"> <svg aria-hidden="true" class="option__graphic"> <use href="#option-wnyc-radio"></use> </svg> <span class="option__label">True</span> </span> </label> <!--{ @for Should match the id of the input }--> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <label class="option " for="8cbf61fd11d18"> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <input id="8cbf61fd11d18" name="boolean" type="radio" value="false" /> <span class="option__base"> <svg aria-hidden="true" class="option__graphic"> <use href="#option-wnyc-radio"></use> </svg> <span class="option__label">False</span> </span> </label> </fieldset> <button class="btn btn-primary" type="submit"> <span>Submit</span> </button> </form>