Skip to content
Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
This will be publicly visible
Error:
Names may not contain symbols
  • Flexible and composable components to layout form elements.
  • Use hint text to give users clear guidance for data entry.
  • Explain complex concepts or aid first-time users with help popovers.
  • Automatically associate labels with Telescope form elements.

Use the Form control component to achieve consistency between layouts of various form elements and more easily ensure accessible forms. The component works in combination with all foundational Telescope form elements.

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.

Never omit the label completely. In rare cases, you may want to hide the label visually. An example of this could be a search field placed near the top of a page, featuring a magnifying glass icon and/or a button labelled “Search”.

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.

This will be publicly visible

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.

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.

Select tags
Error:
Select at least one tag.

Use a "skeleton" version of this component to display a loading state while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Refer to our Forms guidelines for general advice on forms structure, validation, and more.

Do
Use clear and concise labels.
Don't
Use vague or overly long labels.
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:
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.
Do
Mark the minority as required or optional.
Don't
Mark the majority and don't use asterisks.
  • Checkbox: A form element that enables users to make a binary choice (checked/unchecked).
  • Checkbox group: A form element that enables users to select multiple values from a list of options.
  • Currency input: An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
  • Input: A form element that enables users to enter a single line of text.
  • Radio group: A form element that enables users to select a single value from a list of options.
  • Select: A form element that enables users to select a single or multiple values from a list of options.
  • Textarea: A form element that enables users to enter text on multiple lines.