Skip to content
Telescope

Form controlWarning: Draft

Form control displays a labelled input and, optionally, associated validation text and/or hint text.
This will be publicly visible
Error:
Names may not contain symbols

Features

  • 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.

When to use

Use form controls when requiring data input from the user. This component help us keep layouts consistent and ensures accessible form elements. Refer to our Forms guidelines for detailed information on forms structure, validation, and more.

Examples

Label

Labels should be clear and brief, ideally under three words. Use sentence case. For instance: "Invoice date" or "Tax amount".

Label content

If you have a need to show a help popover and/or other supplementary content next to a label, wrap the label in our LabelWrapper component.

Upgrade now

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.

Information:

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

This will be publicly visible

Help

Use the help component 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.

Error

Use error messages to guide users in completing tasks, like clarifying why a value is invalid.

Select tags
Error:
Select at least one tag.

Checkbox group

Use the CheckboxGroup component to group multiple checkboxes together.

Radio group

Use the RadioGroup component to group multiple radio buttons together.

Skeleton

The skeleton property is used to display a loading state for the component 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.

Best practices

Refer to our Forms guidelines for detailed information 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.

Related components

  • Checkbox: Checkboxes are most commonly used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
  • 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.
  • Date input: A means of inputting a date - either in a textfield or using a date picker interface.
  • Input: An element used to create interactive controls for web-based forms in order to accept data from the user.
  • Radio group: A form element that allow users to select an single option from a list of at least two options.
  • Select: A form component used to select data from a list.
  • Textarea: A form element that allows users to enter text on multiple lines.
This page is a draft. Its content is likely to change.