Skip to content
Telescope

Textarea

A form element that enables users to enter text on multiple lines.
You can enter up to 200 charactersYou have 0 characters remaining

Features

When to use

Use a text area to allow users to enter large amounts of text, such as descriptions, comments, or notes. For shorter text inputs, use the Input component.

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.

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.

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.

Provide a brief description of the cost, purpose, or any relevant context

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 an expense description

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.

Character count

Use a character counter to show the number of characters entered. This feature is particularly helpful when the text input must remain within a specific character limit.

You can enter up to 200 charactersYou have 0 characters remaining

Height

Set an initial height of the text area to guide the user towards the expected answer length. For instance, if the user is expected to enter an expense description with a maximum of 200 characters, an initial height of 3 rows might be appropriate.

You can enter up to 200 charactersYou have 0 characters remaining

Fixed height

By default, the height of a text area is dynamic and grows with the input text. If you have a good reason to maintain a more consistent looking user interface, a fixed height can be defined.

Information:

When a fixed height is defined, a scrollbar will appear if the text exceeds the height.

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.

Related components

  • Form control: Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.
  • Input: A form element that enables users to enter a single line of text.