Skip to end of metadata
Go to start of metadata
You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
Version 1
Current »
đ±Â Component basics
đ§Â Specifications
Usage | This component allows users to select an item from a list of options in two ways: 1. Users can scroll through a menu to make a selection 2. Users can type to filter out non-matching options in a menu, and then make a selection from the filtered list |
---|
Variations | None |
Behavior | Match the behavior of the Country/Region field used on the edX registration page with the addition of a spinner in the menu to be displayed when loading: Show field hover state and change cursor to âI-beamâ when user hovers over the editable area in the text field Change cursor to âPointing handâ when user hovers over trailing icon Show the menu when user clicks the trailing icon Show the menu when users begin typing in the field Show menu items that contain a match to what the user has typed Update the menu after every keystroke Show the spinner component for items loading in the menu when necessary Users can also select an item directly from the menu without typing
|
Style | The component should be styled no differently than the components used to create it (menu, text field, spinner) |
---|
đ Additional guidance
Content | The field can contain placeholder text, e.g. âSelect a countryâ, or a preselected item âUnited Statesâ There is no minimum character length users must type before displaying matching items in the menu
|
---|
Accessibility | |
Mobile | |
Best practices | Do consider using this component when users must select an item from a long list of options Do not use placeholder text identical to an item in the menu. For example, use âSelect a countryâ instead of âUnited Statesâ.
|
Related | |