Black Lives Matter. Please consider donating to Black Girls Code today.

Use mobile pickers with a dash app

Hello,

I would like to use mobile native pickers with dropdown list on a dash app. Do you know if this is possible? Something that would look like the photo attached (of course Android or iPhone would render the components differently).

Capture

Many Thanks,
Nicolas!

I think this is handled automatically by the browser. Just set the input type in Dash. If you’re using a mobile browser, it will detect and handle the input based on the type. Just note that some (older) browsers may not handle the input type properly. Here’s an example date dropdown:

dcc.Input(
  id='date',
  type='date'
)

Also, date is not technicaly an allowed input type for Dash, but it seems to work properly when I use it. From the dcc.Input documentation, the allowed types are below:

ALLOWED_TYPES = (
“text”, “number”, “password”, “email”, “search”,
“tel”, “url”, “range”, “hidden”,
)

Hi cufflink,

Thanks very much for your answer. I was using dropdown as I want the input to be restricted to the values (pls let me know if I misunderstood but I believe the list in Input specifies a list of options ie the user can enter something else). I still tried an input object and did not have a nice iPhone or Android picker on mobile (I tried on modern iPhones and Android).

Looking at some existing examples, https://dash-gallery.plotly.host/dash-svm/, use a dropDown to select the dataset. It still shows as below on mobile which is fine, but I was wondering if it is possible to show a better picker on mobile. That would make dash awesome!

Thanks very much,
Nicolas

Ah okay. Not sure about that one. I have only used the default inputs. You could probably customize it with some Javascript, but not something I’ve done.