Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinner Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area When to useBest practiceContentAvailabilityText input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnerPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText 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 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