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 When to usePlacementInteractionAccessibilityContentAvailabilitySnackbar Summary Switch Table Tabs Text area Text 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 SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Select

A select lets a user pick an option from a long list of options — typically 6 or more.

A select component.
When to use

Use a select:

  • when a user needs to pick a single option from a long list — typically 6 or more options

Don't use a select:

  • for shorter lists — use a radio instead
  • if the user needs to select multiple options — use checkbox instead

Placement

  • Select is typically used alongside other fields, like in a form.

  • On larger screens, you can display multiple fields side by side, but on mobile you should only have one per row.

Interaction

  • Users can use a keyboard to tab through and open a select.

  • The select can open different things depending on the platform, such as a dropdown.

Accessibility

  • Select supports TalkBack on Android, and VoiceOver on iOS.

Content

Label

Label copy should:

  • be no more than 3 words

  • be a noun that describes the information the user needs to enter, not an instruction

Description (optional)

Description copy should:

  • be a single sentence

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

Availability

Platform

Available

Developer documentation

Android

iOS

Web