Usage of the component
When you let users choose from a long list of options (30 or more).
When it’s faster to find the right option by typing than choosing from the list.
When the list is short.
When you want to make user go through all the options.
Component status
Figma | React | iOS | Android |
|---|---|---|---|
Designing | Released | N/A | N/A |
Behavior
Use for many options
InputSelect works well to present many different options in a compact unit. By allowing users to type to filter options, they don’t have to scroll through tens of options to find what they’re looking for.
If the amount of options isn’t so big and/or it’s expected that the user goes through all of them before making a choice, consider using the traditional Select component instead.
Use labels
Labels serve to clearly present what’s expected. They’re especially important for people who don’t see other visual cues. But they also help everyone know exactly what to enter.
For the label, use short descriptive phrases, ideally nouns that make the request clear. See our patterns for form labels for some examples.
Use error and help messages
For more complicated fields, sometimes labels aren’t enough. You want to include any necessary information as clear as possible to help users complete the fields.
Use help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.
Remember that such messages are likely to invoke negative feelings, so be positive and focused on solutions to any problems.