Progressive listbox
One choice, fully designed
The native Select remains the form source and fallback while the enhanced popup follows the system surface, spacing, selection, and focus language.
Status controls where the project appears in team views.
Native fallback
Three density levels
Use native Select when platform behavior or zero-JavaScript delivery matters. Medium and Large work for touch; Small fits dense desktop interfaces.
Option groups
Organize a longer list
Native optgroup data becomes a styled, non-interactive heading inside the designed popup.
States
Make the next action clear
Invalid Select connects its error to the control and clears it after a valid choice. Disabled Select remains visible and explains why it cannot change.
Select a role to continue.
Managed by your organization.
Content
Keep labels concise and distinct
Start options with the words that differentiate them. The control truncates visually when space is limited while the native menu preserves the complete label.
Usage guidance
Use Select when the options are known.
For two to five choices that benefit from immediate comparison, Radio may be clearer. Use autocomplete patterns for large or searchable datasets.
Next component: Checkbox and Radio