Skip to content
Telescope

FormsWarning: Draft

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

The label of a form element should be clear and concise, ideally under three words. It should describe the value of the element and not what the user needs to do in order to fill it out properly.

Information:

If you're having trouble keeping label text short, consider using hint text.

Do
Use clear and concise labels.
Don't
Use vague or overly long labels.
Information:
Never omit a label. Form labels are required for accessibility purposes. However, it may be acceptable to hide the label visually in certain cases.

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 form elements in a form as required or optional. This helps users 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 the reading order match the visual order, which is needed for screen readers.

Information:

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

Provide clear and helpful error messages that guide users toward a solution. Instead of merely stating the problem, ensure the message is specific and actionable. Avoid vague or shaming language.

Information:

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.

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.