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 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
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns 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 in the information message if there's a character limit.
  • If the field is optional, make sure to include the optional indication.
  • Only use the information message 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)

Information message (optional)

Information message 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 information message.
A text area with multiple sentences as the information message.

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

Information messages offer a good alternative when you need to provide help on how to fill an input.

Availability

Platform

Available

Developer documentation

Android

iOS

Web