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.
Search
The Search Object provides easy access to search for content in all views.
Demonstration
Markup
<!--{ @id Identifies Search for toggling }--> <!--{ @class Add "o-search-fixed" in production layouts }--> <!--{ @aria-hidden Add aria-hidden="true" in production layouts }--> <div class="o-search " id="aria-c-search"> <div class="o-search__close"> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <!--{ @aria-controls Targets the Search ID for toggling }--> <!--{ @aria-expanded Indicates the toggled state of the target }--> <button aria-controls="aria-c-search" aria-expanded="true" data-js="toggle"> <svg class="icon-wnyc-ui"> <use href="#feather-x"></use> </svg> <span>Close</span> </button> </div> <form class="o-search__form"> <label class="label" for="search-field">Search for programs and occupations</label> <div class="input-search"> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <input data-js="search__input" id="search-field" name="s" placeholder="Search" type="text" value="" /> <!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }--> <button class="input-search__submit" type="submit"> <svg class="icon-wnyc-ui icon-4"> <use href="#feather-search"></use> </svg> </button> </div> </form> </div>