Select components are used for collecting user provided information from a list of options.
Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.
As the user experience can be improved on mobile using the native select of the platform, we allow such pattern.
Some important helper text
With visually hidden label
Label + placeholder
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
The first step is to style the
Once it's styled, you can either use it directly as a text field or provide it to the select
input property to have a
Select component can handle multiple selections.
It's enabled with the
Like with the single selection, you can pull out the new value by accessing
event.target.value in the
onChange callback. It's always an array.
While it's discouraged by the Material Design specification, you can use a select inside a dialog.
TextField wrapper component is a complete form control including a label, input and help text. You can find an example with the select mode in this section.