- 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. They are our preferred responsive forms pattern.
- Fixed labels offer optimal usability for all users
- A fixed label is always visible
- Ideal for responsive forms.
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 are better suited for desktop than mobile due to space constraints on mobile.
- 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)
- Label values “for” and “id” must be used to associate the label with the appropriate form control. Each id used on the page must be unique.
|Date/Time of Change||Who Made the Change||Change Details|
|May. 08 2017 4:09pm||Removed floating label as a standard pattern. Refer to archive for old content: https://fractal.hilton.com/archived/labels-and-placeholders-archived/|
|Mar. 22 2017 6:59pm||Initial content entry for labels|