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>