The examples on this page show how we manage forms and their fields. Recommendations are based on this excellent blog post by Adam Silver.
- Every input needs a label. Put labels above the input.
- Do not use the
- If hint text is needed, add a
<div class="field-description>inside the
<label>. Add hint text when users are more likely to make a mistake, like when having to satisfy a complex set of password rules. Error messages should be a last resort.
- Make form fields look like form fields: apply a border and make sure they are empty to begin with. A height of 44px or more makes them easy to tap on touch screen devices.
- Make sure any
<button>looks like a button. Align them to the left edge of the last input where users naturally look for them. Use a verb for button text because the user is doing something, and relate it to what they are doing - avoid generic ‘Submit’ buttons.
<select>should be a last resort as they’re really hard to use. Try radio buttons instead. Or use an autocomplete, if there’s a long list of options.
- If you have to use a
<select>, don't submit a form when its value changes. Select boxes that submit the form automatically when the user selects an option cause problems for keyboard and screen reader users.