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 Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input When to useBest practiceContentAvailabilityUpload 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 SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Text input

A text input lets users enter a single line of text.

Text input
When to use

Use a text input:

  • in a form, when the user needs to enter information that's unique and can’t be selected from a finite list
  • when the information is known to the user (like their name, email address, IBAN or card number)

Don't use a text input:

  • if you need users to enter text that may be more than a single line (use the text area instead)
  • if you want to predetermine the information a user must enter, and the way they enter it (use specific input components instead, like phone number input, date input or password input)

Best practice
  • Hide the text by default — users can choose to show the content of the field with the built-in action if they want to.
  • 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)

A text input with a short, single word label.
A text input with an instruction as the label

Description (optional)

Description copy should:

  • be a single sentence

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

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