Dropdown and text input - double functionality

davzup89 · March 10, 2023, 2:50pm

Hi,

Is there a component that is at the same time a dropdown and also enables random text input? I haven’t been able to find it but maybe something similar exists.

Use-case: Plot title definition. It can either be a random string or a value of a certain column in a dataset (column selectable by dropdown)

AIMPED · March 10, 2023, 3:16pm

Hi,

Not sure but I think you could use dbc.Dropdownmenu, it accepts dash components as children.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/dropdown_menu/

You could also add drop down options on the fly:

Source:

github.com

AIMPED/plotlyDash_example_collection/blob/master/src/pages/multi_drop_add_options.py

import dash_bootstrap_components as dbc
from dash import Input, Output, State, callback, html, dcc, ctx, MATCH
import dash

dash.register_page(__name__, path="/multi_drop_options")

# design of the modal
modal = html.Div(
    [
        dbc.Modal(
            [
                dbc.ModalHeader(
                    dbc.ModalTitle("Introduce new option")
                ),
                dbc.ModalBody(
                    dcc.Input(
                        id={'type': 'input', 'index': idx},
                        type='text'
                    )
                ),

This file has been truncated. show original

davzup89 · March 10, 2023, 4:48pm

Thanks. Very cool.

Topic		Replies	Views
How to have dbc.Input as option in dcc.DropDown Dash Python	4	563	February 17, 2023
Dropdown - show both inputs and labels when typing Dash Python	2	264	April 26, 2023
2 Identical Dropdowns Instead of Multiselect Dash Python	7	800	January 7, 2022
Passing data in multi-tab app Dash Python	4	509	March 30, 2022
How do I create multiple dropdown options? Dash Python	6	4030	January 31, 2020

Dropdown and text input - double functionality

Related topics