Skip to content
Telescope

FormsDraft

Forms can be simple or complex, and may be presented as dedicated pages, side panels, or modals depending on the use case and the situation.

Labels

Labels should be clear and brief, ideally under three words. They should describe the value of a field and not what the user needs to do in order to fill it out properly. If you're having trouble keeping label text short, consider using hint text instead.

Do
Use clear and concise labels.
Don't
Use vague or overly long labels.

Placeholders

In general, avoid using placeholder text. Putting instructions or important information in placeholder text isn't accessible. As soon as someone starts typing, that text vanishes, and people using auto-fill tools can't see it at all.

Enter a 10 digit number
Do
Use hint text to help users fill out a field correctly.
Don't
Use placeholder text for validation instructions.

Required and optional fields

Mark the minority of fields in a form as required or optional. This helps users to easily and switfly scan the form and understand what is required of them. Type out the word optional or required in the label. E.g. "Per purchase limit (optional)". Don't use asterisks or other symbols.

Do
Mark the minority as required or optional.
Don't
Mark the majority and don't use asterisks.

Hint text

Use hint text to give users clear guidance for data entry. Keep it brief and avoid repeating the label or other form details. If it feels redundant, try removing it. We keep help text above the input field to have reading order match the visual order, which is needed for screen readers.

To explain complex concepts or aid first-time users, prefer help popovers.

The date this invoice was issued to you
Enter the invoice date below
Do
Use hint text to give users clear guidance for data entry.
Don't
Repeat the label or other form details in the hint text.

Error messages

Convey clear, helpful error messages that guide users to a solution, not just stating the problem. For example, if a required email field is missed, simply prompt with "Enter your email address." to direct them appropriately. Avoid vague or shaming language.

See our emerging content guidelines for more guidance.

Error:
Enter your credit card number.
Error:
Invalid field.
Do
Communicate error messages in a way that guides the user towards a solution.
Don't
Simply state what’s wrong and leave users guessing as to how to resolve it.

Help popovers

Use help popovers to aid first-time users or to clarify complex concepts. The help popover can contain interactive content and may be used to provide links for further information.

For information on how to properly fill a field, prefer hint text.

Submit buttons

Users should always be able to press the submit button in a form, even if it’s not filled yet or filled incorrectly. Disabled buttons can cause usability and accessibility issues and hence shouldn’t be used to communicate errors.

Do
Keep submit buttons enabled until the user has filled out the form correctly.
Don't
Disable submit buttons until the user has filled out the form correctly.

Validation

For shorter forms, empty fields and server-side validation, validation should be done on form submission. This helps to prevent users from feeling distracted or annoyed by validation.

Try submitting this form as is.

For longer forms or more strict input fields, live validation should be used. In such cases, the optimal choice is often late validation, a sub type of live validation where validation occurs when the user "leaves" the field (on blur).

Learn more

Good form design involves many considerations that we don't yet cover in Telescope. We've curated a list of resources to help you design effective and pleasant forms.

This page is a draft. Its content is likely to change.