Text inputs

The following input types create a text input: text, date, datetime-local, email, month, number, password, search, tel, time, url, and week.

<label>Text <input type="text"></label>
<label>Number <input type="number"></label>
<label>Date <input type="date"></label>
<label>Password <input type="password"></label>

In some desktop browsers, certain types—number, date, search…—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 .no-controls class will remove most of them.

Text areas

The <textarea> element creates a multi-line text area. The row attribute determines its height, which can be overridden with custom CSS. The cols attribute is not necessary, as the width is always 100%.

<label>Text Area
  <textarea rows="4"></textarea>
</label>

Labels & placeholders

All form inputs must have an associated label. To associate a <label> with an <input> element, give the label a for attribute with the same value as the input's id attribute.

<label for="my-label-id">Input Label</label>
<input type="text" id="my-label-id">

Alternatively, you can nest the input directly inside the label (without matching attributes) to associate them implicitly.

<label>Input Label
  <input type="text">
</label>

Select menus

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.

<label>Choose one
  <select>
    <option value="one-two-family">One & Two Family Buildings</option>
    <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option>
    // more options ...
  </select>
</label>

Multi-select

The multiple attribute allows more than one option to be selected. Use the size 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.

<label>Choose many
  <select multiple size="6">
    <option value="one-two-family">One & Two Family Buildings</option>
    <option value="multi-family-walk-up">Multi-Family Walk-Up Buildings</option>
    // more options ...
  </select>
</label>

Checkboxes & radio buttons

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.

Radio buttons

<fieldset class="fieldset">
  <legend>Choose one zoning type:</legend>
  <input type="radio" name="zoning" id="com_example" value="com"><label for="com_example">Commercial</label>
  <input type="radio" name="zoning" id="man_example" value="man"><label for="man_example">Manufacturing</label>
  <input type="radio" name="zoning" id="res_example" value="res"><label for="res_example">Residential</label>
  <input type="radio" name="zoning" id="par_example" value="par"><label for="par_example">Parks</label>
</fieldset>

Checkboxes

<fieldset class="fieldset">
  <legend>Choose multiple:</legend>
  <input type="checkbox" id="com_example"><label for="com_example">Commercial</label>
  <input type="checkbox" id="man_example"><label for="man_example">Manufacturing</label>
  <input type="checkbox" id="res_example"><label for="res_example">Residential</label>
  <input type="checkbox" id="par_example"><label for="par_example">Parks</label>
</fieldset>

Fieldsets

A group of related controls should be wrapped in a <fieldset> element, and given a common label using the <legend> element. Each individual input should have its own <label>. Fieldsets have no default style. The .fieldset class can be added to the fieldset to style it as a containing box, with the legend in its top-left corner.

<fieldset class="fieldset">
  <legend>Zoning types</legend>
  <input type="checkbox" id="com_example"><label for="com_example">Commercial</label>
  <input type="checkbox" id="man_example"><label for="man_example">Manufacturing</label>
  <input type="checkbox" id="res_example"><label for="res_example">Residential</label>
  <input type="checkbox" id="par_example"><label for="par_example">Parks</label>
</fieldset>

Accessible fieldsets

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 .show-for-sr class can be added to the legend so it's hidden on screen but still available for screen readers.

<fieldset>
  <legend class="show-for-sr">Zoning types:</legend>
  ...
</fieldset>

File upload

Use <input type="file"> 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 <input>. To properly mask the input, the .show-for-sr class is added.

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

Upload & download icons

Add icons to file upload inputs and download buttons give more scannable context to these action. Learn more about using icons in the icons section.

Placeholder text

The placeholder attribute specifies text that appears within an input when it's empty.

<input type="text" placeholder="This is placeholder text">

Placeholders are not accessible!

Do not use placeholder text to replace the functionality of a <label> 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 labels or help text.

Search is the exception. 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 Search Form component for information on implementing this.

Help text

Place .help-text below a form element to clarify any instructions or requirements. Give the help text a unique ID, and add the attribute aria-describedby to the associated form element. Screen readers can read the help text when the user focusses an associated input.

<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>

Search form

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 placeholder text. However, you must also include a label for accessibility—the .show-for-sr class can be added to the label so it's hidden on screen but still available for screen readers.

Use the .search-form, .search-input, and .search-icon classes to create a search component where the icon is positioned over the input. The .large-padding-right prevents the icon from overlapping the input's text.

<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>