Action button Alert Avatar Bottom sheet Button Card Checkbox Chip Circular button Compact date input Critical banner Date input Date picker Dropdown Instruction Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Tabs Text area When to useBest practiceContentAvailabilityText input Upload Upload input Copy Block Image Ratios Carousel Cards
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputCopy BlockImage RatiosCarousel CardsPatterns Resources
Text area

A text area is a field that lets users enter several lines of text.

TBC
When to use

Use a text area:

  • when users need space to add several lines of text (for example, when leaving a comment or adding a description)
  • when there’s a character limit that you want users to be aware of

Don't use a text area:

  • if you need the user to enter a single line of text (use the text input instead)

Best practice
  • Use the character limitation counter if there's a character limit.
  • If the field is optional, make sure to include the optional indication.
  • Only add a description if you have evidence that users need more context.

Content

Label

Label copy should:

  • be no more than 3 words

  • be a noun that describes the information the user needs to enter (and not a verb)

Description (optional)

Description copy should:

  • be a single sentence

  • give some extra context to help the user enter the right information

A text area with a short and succinct description.
A text area with multiple sentences as the description.

Placeholders

Placeholders are not supported in most of our components, since (according to our research):

  • people may confuse the content with real values

  • lack of contrast make them usually difficult to read

  • they are often used with dummy values, so aren’t helpful to our users

The optional description offers a good alternative when you need to provide help on how to fill an input.

Availability

Platform

Available

Developer documentation

Android

iOS

Web