Tools
Carta does not use placeholder text inside fields as a general rule. Although common, placeholders are not helpful and actually worsen the user experience.
A few reasons to avoid placeholder text:
In short, use help text instead of placeholder text. The only thing that should go inside form inputs are the user answers.
Participants are eligible to sell securities as of the last order date. However, a different vested date may be set to calculate ownership.
For example: +1 123-456-7890
Do
Add help instead of placeholder text. It is always visible and allows for longer and more helpful messages.
Participants are eligible to sell securities as of the last order date. However, a different vested date may be set to calculate ownership.
For example: +1 123-456-7890
Do
Add help instead of placeholder text. It is always visible and allows for longer and more helpful messages.
Don't
Placeholders inside inputs make them look filled, and the text disappears when users type. It is also impossible to provide longer texts.
Don't
Placeholders inside inputs make them look filled, and the text disappears when users type. It is also impossible to provide longer texts.
Note: The only accepted exception are placeholders inside table cells, as there is no available space for properly displaying helper text around the cell.
The following error messages should be used in most cases. If case-specific error messages may be written, those should be used instead of these.
Case | Error message |
---|---|
Input contains invalid characters, is too long or too short, etc. | “Enter a valid {field label}. {field label} {criteria}” Example:
|
Case | Error message |
---|---|
No value, or value is in wrong format | “Enter a date in the form {format}” Example:
|
Value outside of valid range relative to today | “Enter a date [on or][after/before] today ({formatted date})” Include the actual date in the format required by the input Examples:
|
Value outside of valid range relative to another editable field in the same form or workflow | “Enter a date [on or][after/before] {other field name}” Examples:
|
Value outside of valid range relative to another value not editable in the same form or workflow, or value outside of range of two specific dates, or some more complex criteria | “Enter a date [after/before] {formatted date 1} [and before {formatted date 2}]” To keep the message short, specify the range using dates which are the day before/after the inclusive ends of the range Examples:
|
Case | Error message |
---|---|
The value in either field results in a period which is outside of the required range | “Enter dates which are {on or} [after/before] today” To avoid confusion, do not include today’s actual date in parenthesis in this case. Examples:
|
The dates are out of order | “Enter a {start label} which is before the {end label}” Replace {start label} and {end label} with the field labels shown on the form Example:
|
Case | Error message |
---|---|
Value outside of valid range | “Enter a {field name} [greater than/less than][or equal to] [{other field name} / {formatted value}]” Examples:
|
Value must be an integer | “Enter a {field name} which is an integer” Example:
|
Case | Error message |
---|---|
Input is valid, but is already in use | “Enter a unique {field label}. “{existing value}” is already in use.” Example:
|
Case | Error message |
---|---|
No file uploaded | “Upload a file to proceed” |
File type: only allow files of specified type (i.e. xlsx, pdf, docx) | “File type is not supported. Upload a [accepted type] file.” |
File size (ex. too big) | “File size exceeds the [max size] limit. Upload a smaller file.” |
Upload failed | “Something went wrong. Try uploading again.” |
File empty | “Unable to extract information from your file. Try uploading again.” |
Case | Error message |
---|---|
Multiple cells with invalid or no values in the editable table | Banner title (universal copy) “Fix the highlighted errors in the table below” Individual error messages should follow the UX writing guideline for each field type. Examples:
|
When multiple cells in a row disagree with each other, but it is impossible for the software to tell which one is “wrong.” Example: A row which has city, state and postal code columns. Each cell can be individually valid, but they might not agree with each other. | “The combination of {field name #1} and {field name #2} is invalid. Enter a different {field name #1} or {field name #2}. Example:
|
How to utilize the AddressAutocomplete component from the @carta/identity team
View patternForm validation, done right, can improve the form filling experience, and user satisfaction
View patternLayout, type hierarchy, and color, impact legibility, usability, and completion metrics
View patternIs this page helpful?