Pickers

Pickers

Pickers provide a simple way to select a single value from a pre-determined set.

  • On mobile, pickers are best suited for display in confirmation dialog.
  • For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.

Notice

We are currently falling back to native input controls. If you are interested in implementing or have implemented a rich Material Design Picker with an awesome UX, please, let us know on #4787 and #4796! We could add a link to or a demo of your project in the documentation. Here are some components that are promising:

⚠️ Native input controls support by browsers isn't perfect.

Date pickers

A native date picker example with type="date", it can be used as a calendar too:

Time pickers

A native time picker example with type="time":

Date & Time pickers

A native date & time picker example with type="datetime-local":