<div class=half>
  <h4>Grouping and layout</h4>
  <ul>
    <li>Group inputs associated with one function within a background container.</li>
    <li>Layout inputs in a logical order. Try to group similar input types to make it easier to fill out.</li>
    <li>Display form fields side by side only if they're reasonably related. Don't do it just to fill the space.</li>
    <li>Display date range fields side by side (and shorter than other text field types).</li>
    <li>Stack radio buttons and checkboxes. Use more space between them if they aren't a group of similar items.</li>
  </ul>
</div>

<div class="half">
  <h4>Specific field types</h4>
  <ul>
    <li>Mark mandatory fields with an *.</li>
    <li>Use radio buttons instead of dropdown lists for small finite lists and toggles.</li>
    <li>Display a calendar icon in the right of date picker fields. When either the icon or the field is clicked, a calendar picker should appear.</li>
    <li>Display a downwards pointing arrow in all dropdown lists, and Select2 dropdown fields.</li>
    <li>Include a way for users to access a plain text version of their password in a password field.</li>
  </ul>
</div>

<h4>Input widths</h4>
<p>Size a text field or a text box so that it's indicative of how much text goes inside of it.</p>
<table>
  <tr>
    <th>Input type</th>
    <th>2/3 column<br>(main content area)</th>
    <th>1/3 column<br>(secondary content area)</th>
    <th>1/2 column<br>(main content, small screen)</th>
    <th>1 column<br>(main &amp; secondary content, small screen)</th>
  </tr>
  <tr>
    <td>text field - 'normal'</td>
    <td>full, half, or quarter width</td>
    <td>full or half width</td>
    <td>full or half width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>text field - date picker</td>
    <td>half width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>text field - multi selects  </td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>2 text fields - date range</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>text box</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>select box ('regular' and select2)</td>
    <td>full, half, or quarter width</td>
    <td>full or half width</td>
    <td>full or half width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>checkbox - single</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>checkbox - list</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
  <tr>
    <td>radio button - list</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
    <td>full width</td>
  </tr>
</table>
