nyc-planning-style-guide

<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NYC Planning Digital Style Guide</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> <link rel="stylesheet" href="../assets/css/nyc-planning.css"> <style> .header-logo { max-height: 4.5rem; } .code-example code { display: block; padding: 1rem; overflow-x: scroll; margin-bottom: 1.5rem; } .is-stuck{ max-height: 100vh; overflow: auto; } .code-example + .callout, .code-example + table { margin-top: calc(-1px - 1.5rem); } section + section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #d3d5d9; } section h4 { margin-top: 1.5rem; } section .code-example + h4 { margin-top: 0; } .callout.clear { background-color: transparent; border-color: transparent; } .color-swatch { list-style: none; margin: 0; padding: 2.5rem 0.75rem 0.75rem; line-height: 1.4; } </style> </head> <body id="top"> <header class="xlarge-padding-top large-padding-bottom bg-white-smoke"> <div class="grid-container"> <div class="grid-x text-center medium-text-left align-middle"> <div class="cell medium-shrink"> <img class="header-logo medium-margin-right medium-margin-bottom" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" alt="NYC Planning" /> </div> <div class="cell medium-auto"> <h1 class="no-margin">Digital Style Guide</h1> <p class="medium-margin-bottom">Standards, Code Snippets, & Assets</p> </div> <p class="cell medium-shrink no-margin show-for-medium"> <a href="https://github.com/NYCPlanning/nyc-planning-style-guide"> <i class="fab fa-github fa-2x small-margin text-light-gray"></i> 1.0.7 </a> </p> </div> </div> </header> <div id="main-content" class="grid-container"> <div class="grid-x grid-margin-x"> <div class="medium-8 large-9 cell medium-order-2 large-padding-top large-padding-bottom"> <h1 id="forms" class="large-margin-bottom">Forms</h1> <section> <h3 id="text-inputs">Text inputs <sup><a href="#text-inputs" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>The following input types create a text input: <code>text</code>, <code>date</code>, <code>datetime-local</code>, <code>email</code>, <code>month</code>, <code>number</code>, <code>password</code>, <code>search</code>, <code>tel</code>, <code>time</code>, <code>url</code>, and <code>week</code>.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span>></span>Text <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">label</span>></span>Number <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">label</span>></span>Date <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"date"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">label</span>></span>Password <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span>></span><span class="hljs-tag"></<span class="hljs-title">label</span>></span></code></pre></div><div class="callout"> <label>Text <input type="text" value="I've entered some text!"></label> <label>Number <input type="number" value="42"></label> <label>Date <input type="date"></label> <label class="no-margin">Password <input type="password" value="1234567890" class="no-margin"></label> </div> <p>In some desktop browsers, certain types—<code>number</code>, <code>date</code>, <code>search</code>…—have controls in them which allow the user to increment/decrement the text inside the field, select it from a dropdown, or clear it. When adding custom controls, be sure they don't conflict with these browser-specific controls. Adding the <code>.no-controls</code> class will remove most of them.</p> </section> <section> <h3 id="text-areas">Text areas <sup><a href="#text-areas" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>The <code><textarea></code> element creates a multi-line text area. The <code>row</code> attribute determines its height, which can be overridden with custom CSS. The <code>cols</code> attribute is not necessary, as the width is always 100%.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span>></span>Text Area <span class="hljs-tag"><<span class="hljs-title">textarea</span> <span class="hljs-attribute">rows</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-title">label</span>></span></code></pre></div><div class="callout"> <label>Text Area<textarea rows="4" class="no-margin"></textarea></label> </div> </section> <section> <h3 id="labels-and-placeholders">Labels & placeholders <sup><a href="#labels-and-placeholders" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>All form inputs must have an associated label. To associate a <code><label></code> with an <code><input></code> element, give the label a <code>for</code> attribute with the same value as the input's <code>id</code> attribute.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"my-label-id"</span>></span>Input Label<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"my-label-id"</span>></span></code></pre></div><div class="callout"> <label for="my-label-id">Input Label</label> <input type="text" id="my-label-id"> </div> <p>Alternatively, you can nest the input directly inside the label (without matching attributes) to associate them implicitly.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span>></span>Input Label <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span>></span> <span class="hljs-tag"></<span class="hljs-title">label</span>></span></code></pre></div><div class="callout"> <label>Input Label <input type="text" class="no-margin"> </label> </div> </section> <section> <h3 id="select-menus">Select menus <sup><a href="#select-menus" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>Select menus combine choices into one condensed menu. However, when the user needs to see all available choices, radio buttons are often more user-friendly. For long lists, consider using a typeahead autocomplete component.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span>></span>Choose one <span class="hljs-tag"><<span class="hljs-title">select</span>></span> <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"one-two-family"</span>></span>One & Two Family Buildings<span class="hljs-tag"></<span class="hljs-title">option</span>></span> <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"multi-family-walk-up"</span>></span>Multi-Family Walk-Up Buildings<span class="hljs-tag"></<span class="hljs-title">option</span>></span> // more options ... <span class="hljs-tag"></<span class="hljs-title">select</span>></span> <span class="hljs-tag"></<span class="hljs-title">label</span>></span></code></pre></div><div class="callout"> <label>Choose one <select class="no-margin-bottom"> <option value="one-two-family">One & Two Family Buildings</option> <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option> <option value="multi-family-elevator">Multi-Family Elevator Buildings</option> <option value="mixed-residential-commercial">Mixed Residential & Commercial Buildings</option> <option value="commercial-office">Commercial & Office Buildings</option> <option value="industrial-manufacturing">Industrial & Manufacturing</option> <option value="transportation-utility">Transportation & Utility</option> <option value="public-facilities-institutions">Public Facilities & Institutions</option> <option value="open-space-outdoor-recreation">Open Space & Outdoor Recreation</option> <option value="parking-facilities">Parking Facilities</option> <option value="vacant-land">Vacant Land</option> <option value="other">Other</option> </select> </label> </div> <h4 id="multi-select">Multi-select</h4> <p>The <code>multiple</code> attribute allows more than one option to be selected. Use the <code>size</code> attribute to set how many options are visible at once (defaults to 4). However, since UX can vary by OS/browser and multiple selection may not be intuitive, checkboxes are often more user-friendly.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span>></span>Choose many <span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">multiple</span> <span class="hljs-attribute">size</span>=<span class="hljs-value">"6"</span>></span> <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"one-two-family"</span>></span>One & Two Family Buildings<span class="hljs-tag"></<span class="hljs-title">option</span>></span> <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"multi-family-walk-up"</span>></span>Multi-Family Walk-Up Buildings<span class="hljs-tag"></<span class="hljs-title">option</span>></span> // more options ... <span class="hljs-tag"></<span class="hljs-title">select</span>></span> <span class="hljs-tag"></<span class="hljs-title">label</span>></span></code></pre></div><div class="callout"> <label>Choose many <select multiple size="6" class="no-margin-bottom"> <option value="one-two-family">One & Two Family Buildings</option> <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option> <option value="multi-family-elevator">Multi-Family Elevator Buildings</option> <option value="mixed-residential-commercial">Mixed Residential & Commercial Buildings</option> <option value="commercial-office">Commercial & Office Buildings</option> <option value="industrial-manufacturing">Industrial & Manufacturing</option> <option value="transportation-utility">Transportation & Utility</option> <option value="public-facilities-institutions">Public Facilities & Institutions</option> <option value="open-space-outdoor-recreation">Open Space & Outdoor Recreation</option> <option value="parking-facilities">Parking Facilities</option> <option value="vacant-land">Vacant Land</option> <option value="other">Other</option> </select> </label> </div> </section> <section> <h3 id="checkboxes-and-radio-buttons">Checkboxes & radio buttons <sup><a href="#checkboxes-and-radio-buttons" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>When selecting from a short list of options, checkboxes and radio buttons are often a more user-friendly alternative to select menus. Use radio buttons when the user must select only one option. Use checkboxes when the user may select multiple options. For long lists, consider using a typeahead autocomplete component.</p> <h4 id="radio-buttons">Radio buttons</h4> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fieldset"</span>></span> <span class="hljs-tag"><<span class="hljs-title">legend</span>></span>Choose one zoning type:<span class="hljs-tag"></<span class="hljs-title">legend</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"com_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"com"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"com_example"</span>></span>Commercial<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"man_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"man"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"man_example"</span>></span>Manufacturing<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"res_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"res"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"res_example"</span>></span>Residential<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"zoning"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"par_example"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"par"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"par_example"</span>></span>Parks<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"></<span class="hljs-title">fieldset</span>></span></code></pre></div><div class="callout"> <fieldset class="fieldset"> <legend>Choose one zoning type:</legend> <input type="radio" name="zoning" id="r_com" value="com"><label for="r_com">Commercial</label> <input type="radio" name="zoning" id="r_man" value="man"><label for="r_man">Manufacturing</label> <input type="radio" name="zoning" id="r_res" value="res"><label for="r_res">Residential</label> <input type="radio" name="zoning" id="r_par" value="par"><label for="r_par">Parks</label> </fieldset> </div> <h4 id="checkboxes">Checkboxes</h4> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fieldset"</span>></span> <span class="hljs-tag"><<span class="hljs-title">legend</span>></span>Choose multiple:<span class="hljs-tag"></<span class="hljs-title">legend</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"com_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"com_example"</span>></span>Commercial<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"man_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"man_example"</span>></span>Manufacturing<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"res_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"res_example"</span>></span>Residential<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"par_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"par_example"</span>></span>Parks<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"></<span class="hljs-title">fieldset</span>></span></code></pre></div><div class="callout"> <fieldset class="fieldset"> <legend>Choose multiple:</legend> <input type="checkbox" id="c_com"><label for="c_com">Commercial</label> <input type="checkbox" id="c_man"><label for="c_man">Manufacturing</label> <input type="checkbox" id="c_res"><label for="c_res">Residential</label> <input type="checkbox" id="c_par"><label for="c_par">Parks</label> </fieldset> </div> </section> <section> <h3 id="fieldsets">Fieldsets <sup><a href="#fieldsets" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>A group of related controls should be wrapped in a <code><fieldset></code> element, and given a common label using the <code><legend></code> element. Each individual input should have its own <code><label></code>. Fieldsets have no default style. The <code>.fieldset</code> class can be added to the fieldset to style it as a containing box, with the legend in its top-left corner.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fieldset"</span>></span> <span class="hljs-tag"><<span class="hljs-title">legend</span>></span>Zoning types<span class="hljs-tag"></<span class="hljs-title">legend</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"com_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"com_example"</span>></span>Commercial<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"man_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"man_example"</span>></span>Manufacturing<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"res_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"res_example"</span>></span>Residential<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"par_example"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"par_example"</span>></span>Parks<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"></<span class="hljs-title">fieldset</span>></span></code></pre></div><div class="callout"> <fieldset class="fieldset"> <legend>Zoning types</legend> <input type="checkbox" id="f_com"><label for="f_com">Commercial</label> <input type="checkbox" id="f_man"><label for="f_man">Manufacturing</label> <input type="checkbox" id="f_res"><label for="f_res">Residential</label> <input type="checkbox" id="f_par"><label for="f_par">Parks</label> </fieldset> </div> <h4 id="accessible-fieldsets">Accessible fieldsets</h4> <p>To increase accessibility, related controls (especially checkboxes and radio buttons) should always be wrapped in a fieldset. If this is not ideal for the UI/layout, the <code>.show-for-sr</code> class can be added to the legend so it's hidden on screen but still available for screen readers.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">fieldset</span>></span> <span class="hljs-tag"><<span class="hljs-title">legend</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>></span>Zoning types:<span class="hljs-tag"></<span class="hljs-title">legend</span>></span> ... <span class="hljs-tag"></<span class="hljs-title">fieldset</span>></span></code></pre></div><div class="callout"> <fieldset> <legend class="show-for-sr">Zoning types:</legend> <input type="checkbox" id="af_com"><label for="af_com">Commercial</label> <input type="checkbox" id="af_man"><label for="af_man">Manufacturing</label> <input type="checkbox" id="af_res"><label for="af_res">Residential</label> <input type="checkbox" id="af_par"><label for="af_par">Parks</label> </fieldset> </div> </section> <section> <h3 id="file-upload">File upload <sup><a href="#file-upload" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>Use <code><input type="file"></code> to create a file upload button. For security reasons, most browsers don't let you style file inputs. To work around that, we can style a form label as a button, and point it to the <code><input></code>. To properly mask the input, the <code>.show-for-sr</code> class is added.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"exampleFileUpload"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"button"</span>></span>Upload File<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"file"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"exampleFileUpload"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>></span></code></pre></div><div class="callout"> <label for="exampleFileUpload" class="button no-margin">Upload File</label> <input type="file" id="exampleFileUpload" class="show-for-sr"> </div> <h4 id="upload--download-icons">Upload & download icons</h4> <p>Add icons to file upload inputs and download buttons give more scannable context to these action. Learn more about using icons in the <a href="#icons" data-smooth-scroll>icons</a> section.</p> <div class="callout"> <label for="exampleFileUpload_2" class="button secondary no-margin"><i class="fas fa-upload"></i> Upload</label> <input type="file" id="exampleFileUpload_2" class="show-for-sr"> <button class="button secondary no-margin"><i class="fas fa-download"></i> Download</button> </div> </section> <section> <h3 id="placeholder-text">Placeholder text <sup><a href="#placeholder-text" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>The <code>placeholder</code> attribute specifies text that appears within an input when it's empty.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"This is placeholder text"</span>></span></code></pre></div><div class="callout"> <input type="text" placeholder="This is placeholder text"> </div> <h4 id="-placeholders-are-not-accessible"><i class="fas fa-exclamation-triangle text-gold"></i> Placeholders are not accessible!</h4> <p><i class="fas fa-ban fuchsia"></i> Do not use placeholder text to replace the functionality of a <code><label></code> element. Placeholder text can’t be automatically translated, doesn't work with assistive technology, and causes UX confusion—users may assume that the field is already filled out and upon entering their first character, they no longer see the prompt. Explicit instructions and requirements for inputs should appear in <a href="#labels" data-smooth-scroll>labels</a> or <a href="#help-text" data-smooth-scroll>help text</a>.</p> <p><strong>Search is the exception.</strong> It's a standard UI convention for search inputs to have a magnifying glass icon, which clearly communicates the function of the input. In this case, it is acceptable to use placeholder text. However, you must also include a label for accessibility. View to the <a href="#search-form" data-smooth-scroll>Search Form</a> component for information on implementing this.</p> </section> <section> <h3 id="help-text">Help text <sup><a href="#help-text" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>Place <code>.help-text</code> below a form element to clarify any instructions or requirements. Give the help text a unique <code>ID</code>, and add the attribute <code>aria-describedby</code> to the associated form element. Screen readers can read the help text when the user focusses an associated input.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">label</span>></span>Password <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">aria-describedby</span>=<span class="hljs-value">"passwordHelpText"</span>></span> <span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"help-text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"passwordHelpText"</span>></span>Your password must have at least 10 characters, a number, and an Emoji.<span class="hljs-tag"></<span class="hljs-title">p</span>></span></code></pre></div><div class="callout"> <label>Password <input type="password" aria-describedby="passwordHelpText"> </label> <p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p> </div> </section> <section> <h3 id="search-form">Search form <sup><a href="#search-form" class="silver"><i class="fas fa-link"></i></a></sup></h3> <p>It's a standard UI convention for search inputs to have a magnifying glass icon. This clearly communicates the function of the input. This is the one case where it's acceptable to use <a href="#placeholder-text" data-smooth-scroll>placeholder text</a>. However, you must also include a label for accessibility—the <code>.show-for-sr</code> class can be added to the label so it's hidden on screen but still available for screen readers.</p> <p>Use the <code>.search-form</code>, <code>.search-input</code>, and <code>.search-icon</code> classes to create a search component where the icon is positioned over the input. The <code>.large-padding-right</code> prevents the icon from overlapping the input's text.</p> <div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">fieldset</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"search-form"</span>></span> <span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"my-search-field"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"show-for-sr"</span>></span>Search<span class="hljs-tag"></<span class="hljs-title">label</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"search"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"Search..."</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"my-search-field"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"search-input no-controls large-padding-right"</span>></span> <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"search-icon"</span>></span><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search text-dark-gray"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span> <span class="hljs-tag"></<span class="hljs-title">fieldset</span>></span></code></pre></div><div class="callout"> <fieldset class="search-form"> <label for="my-search-field" class="show-for-sr">Search</label> <input type="search" placeholder="Search..." id="my-search-field" class="search-input no-controls large-padding-right"> <button type="submit" class="search-icon"><i class="fas fa-search text-dark-gray"></i></button> </fieldset> </div> </section> </div> <div class="medium-4 large-3 cell medium-order-1" data-sticky-container> <div class="sticky large-padding-top large-padding-bottom" data-sticky data-margin-top="0" data-anchor="main-content">  <ul class="no-bullet" data-smooth-scroll data-animation-easing="swing"> <li> <a href="/" class="text-weight-bold display-inline-block ">Overview</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/getting-started" class="text-weight-bold display-inline-block ">Getting Started</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/logo" class="text-weight-bold display-inline-block ">Logo</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/color" class="text-weight-bold display-inline-block ">Color</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/icons" class="text-weight-bold display-inline-block ">Icons</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/typography" class="text-weight-bold display-inline-block ">Typography</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/forms" class="text-weight-bold display-inline-block active">Forms</a> <ul class="medium-margin-bottom text-small"> <li><a href="#text-inputs">Text inputs</a></li> <li><a href="#text-areas">Text areas</a></li> <li><a href="#labels-and-placeholders">Labels & placeholders</a></li> <li><a href="#select-menus">Select menus</a></li> <li><a href="#checkboxes-and-radio-buttons">Checkboxes & radio buttons</a></li> <li><a href="#fieldsets">Fieldsets</a></li> <li><a href="#file-upload">File upload</a></li> <li><a href="#placeholder-text">Placeholder text</a></li> <li><a href="#help-text">Help text</a></li> <li><a href="#search-form">Search form</a></li> </ul> </li> <li> <a href="/navigation" class="text-weight-bold display-inline-block ">Navigation</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/accessibility" class="text-weight-bold display-inline-block ">Accessibility</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/layout" class="text-weight-bold display-inline-block ">Layout</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/maps" class="text-weight-bold display-inline-block ">Maps</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/voice-and-language" class="text-weight-bold display-inline-block ">Voice & Language</a> <ul class="medium-margin-bottom text-small"> </ul> </li> </ul> </div> </div> </div> </div> <script src="../assets/js/nyc-planning.js"></script> </body> </html>