- Form labels are exactly what they sound like –– text used to tell users what to type in a form field.
- Labels can be fixed outside a field, or positioned inside a field as a floating label.
- Placeholders provide the user with hints about what’s required for a field.
A fixed label is positioned outside the input field, and doesn’t change when the user interacts with the field. Fixed labels are static elements on a form.
- Fixed labels offer optimal usability for all users
- A fixed label is always visible
A floating label is positioned inside the input field by default, and typically adapts to a smaller size and moves to the top of the field once it is in focus.
- Floating labels save space, and give forms a cleaner look
- However, floating labels are not as accessible as fixed labels
An infield label sits to the left, within the same border as the input field. The input field comes into focus once the user clicks anywhere inside the frame, including the text label.
- In-field labels save space, and give forms a cleaner look
- They provide better accessibility than floating labels.
- In-field placeholders are short text that are placed inside a field to help the user know exactly what to enter into the field.
- They are usually paired with fixed labels.
- They are sometimes used to tell the user how to format date or phone number responses.
- Hint text is usually positioned outside a field.
- It is especially helpful to describe complicated information like password requirements.
- Hint Text can be made interactive to showcase real-time input validation.
Place fixed labels close to their associated input field.
Preferably, place labels above the field to improve scannability. Placing them to the left of the input is also commonly accepted.
Keep labels succinct to help improve form scannability.
Avoid using labels as placeholders only. Ensure placeholders always accompany static labels, or use floating or infield labels.
- Labels must remain persistent, and placeholder text cannot substitute for labels.
- All labels, placeholders, and field inputs must adhere to contrast ratios set in WCAG 2.0 (Generally 3:1for type 18px and over; 4.5:1 for type under 18px)