Action button 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 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 When to useBest practiceContentAvailabilitySection header Segmented control Select Snackbar Summary Switch Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
Search input

A search input allows users to look for information from a wide set of possible results.

Search input
When to use

Use a search input:

  • when you want give users the possibility of finding information that is not immediately visible
  • when there could be multiple results from different sources

Don't use a search input:

  • when there are limited options a user can pick from (use a dropdown instead)
  • if you want users to filter results from a predefined set of options

Best practice
  • If you have limited vertical space, use the placeholder instead of the label (but try and use the label wherever possible as it is clearer and more accessible).
  • Use the size of the input to suggest how many characters a user should enter — so if you only need a few characters, don’t make it too wide.
  • 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

Placeholder

Placeholder copy should:

  • be relevant and short

  • tell the user what to enter (for example, 'Search')

Availability

Platform

Available

Developer documentation

Android

iOS

Web