Selects

Selects

Select components are used for collecting user provided information from a list of options.

Simple Select

Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.

Some important helper text

None

Without label

None

Label + placeholder

Hai

Disabled

⚠️ - hai

Error

Hai

Read only

Auto width

Placeholder

Placeholder

Required

Native Select

As the user experience can be improved on mobile using the native select of the platform, we allow such pattern.

Some important helper text

Without label

Label + placeholder

Disabled

Error

Uncontrolled

Placeholder

Required

Customized selects

If you have been reading the overrides documentation page but you are not confident jumping in, here's an example of how you can change the main color of an Input.

⚠️ While the material design specification encourages theming, these examples are off the beaten path.

Multiple Select

The Select component can handle multiple selections. It's enabled with the multiple property.

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.

Placeholder

Controlled open Select

With a Dialog

While it's discouraged by the Material Design specification, you can use a select inside a dialog.

Text Fields

The 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.