Skip to content
Telescope

Input

A form element that enables users to enter a single line of text.

Features

When to use

Use a text input to allow users to input short free-form text. For longer text, consider using a Textarea component instead. See our Forms guidelines for detailed information on forms structure, validation, and more.

Examples

Information:
We promote usage of this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports advanced use cases such as hint text, help popovers and error messages.

Label

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.

Hiding the label

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

Placeholder

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.

Required or optional

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.

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.

This will be publicly visible

Help popover

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.

Error

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.

Error:
Enter your email address

Skeleton

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.

Disabled

Disable a form element to indicate that it’s currently unavailable. This can be used to maintain layout consistency and communicate that the element may become available later. If the form element will never be available in a given context, leave it out.

Prefix

To enhance usability for sighted users, use a prefix to visually indicate the type of input expected. For example, place a search icon in a search field to help users immediately recognize its purpose.

Postfix

Add a postfix to visually indicate the type of input expected, enhancing usability for sighted users. An example would be to display supplementary information, such as a unit or currency symbol, at the end of the input field.

Information:

Prefer using our Currency input component when working with currencies.

USD

Underlined

Information:

This variant is considered for deprecation and discouraged for new designs.

Use an underlined input in cases where the default bordered variant would add significant visual clutter (e.g. for multiple inputs within a table component).

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

Best practices

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.
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.
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.
Do
Mark the minority as required or optional.
Don't
Mark the majority and don't use asterisks.
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.

Related components

  • 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.
  • Form control: Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
  • Search: An input that allow users to find content by entering a search term.
  • Textarea: A form element that enables users to enter text on multiple lines.