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.
Options
Demonstration
Markup
<!--{ @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="d043c819175">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="d043c819175" name="option['d043c819175']" type="checkbox" value="checkbox-option" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic">
<use href="#option-wnyc-checkbox"></use>
</svg>
<span class="option__label">Checkbox Option</span>
</span>
</label>
Demonstration
Markup
<!--{ @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="01913bf5dcace">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="01913bf5dcace" name="option['01913bf5dcace']" type="radio" value="radio-option" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic">
<use href="#option-wnyc-radio"></use>
</svg>
<span class="option__label">Radio Option</span>
</span>
</label>