Multiple User Input - UI Component Options

Dash Python
1

All,
This should be a fairly straightforward question. Is there an UI component that would allow me to collect multiple values from the user for the same input ? I don’t know if I want to really use dropdown as an option because, I don’t know what values the user can select from the dropdown. Take the example of coordinates:

  • If I am collecting a list of coordinates from the user, but want to restrict latitude to one UI component and longitude to one UI component, how could I achieve that ?

Thanks
Uday

2

There might be many better ways of doing it, I am just adding a simple one…

If you are looking for a way to let the user pass a list of pair of values (latitude and longitude), you might want to use two inputs and a button to submit them.

In a very raw form:

import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

app.layout = html.Div(
    [
        dcc.Input(id="lat"),
        dcc.Input(id="lon"),
        dbc.Button("Submit", id="submit"),
        html.Div(id="output"),
    ]
)

@app.callback(
    Output("output", "children"),
    Input("submit", "n_clicks"),
    State("lat", "value"),
    State("lon", "value")
)
def enter_values(n_clicks, lat, lon):
    # your logic, I will just return the values
    return f"Latitude: {lat} Longitude: {lon}"

If you want to keep state of the list of values used, you might want to take a look in dcc.Store. Plus, there are many ways to make this “composed component” look nicer… this is just the funtionality bit.

3

Thank you @jilfsjunior, Looking for more options, but appreciate your input

1 Like
4

thanks for the awesome information.

5

thanks my issue has been fixed.