# Multi-select list box **URL:** \ **Category:** Dash Python\ **Created:** [January 17, 2018, 12:11am UTC](https://community.plotly.com/t/multi-select-list-box/7768 "2018-01-17T00:11:31Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![plotShower](https://avatars.discourse-cdn.com/v4/letter/p/48db29/32.png) [@plotShower](https://community.plotly.com/u/plotShower)\ **Post date:** [January 17, 2018, 12:11am UTC](https://community.plotly.com/t/multi-select-list-box/7768/1 "2018-01-17T00:11:31Z")
Hello, How do I create a multi-select listbox in Dash similar to this matlab example [https://www.mathworks.com/help/matlab/creating\_guis/plot-workspace-variables-in-a-guide-gui.html](https://www.mathworks.com/help/matlab/creating_guis/plot-workspace-variables-in-a-guide-gui.html) ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [January 17, 2018, 2:19am UTC](https://community.plotly.com/t/multi-select-list-box/7768/2 "2018-01-17T02:19:53Z")
There isn’t a component that provides that exact behavior, but you can put together something that should get you what you need. I would use the Dropdown [Dash core component](https://plot.ly/dash/dash-core-components) with `multi=True`. If you want the callback to only be triggered only after you have selected more than one option (as well as potentially input being entered into other form elements), then you’ll need to use this component as a State for a callback (rather than an Input) and have the callback be triggered through say a click Event on a submit button. For example: ```python @app.callback(Output('output-id', 'children'), [], [State('dropdown-id', 'value')], [Event('submit-id', 'click')]) def multi_select(dropdown_values): return f"values submitted: {dropdown_values}" ``` ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [January 17, 2018, 5:39pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/3 "2018-01-17T17:39:39Z")
You can also use the `dcc.Checklist` component if the number of items is small. See [https://plot.ly/dash/dash-core-components](https://plot.ly/dash/dash-core-components) for a full list of inputs ---
**Author:** ![plotShower](https://avatars.discourse-cdn.com/v4/letter/p/48db29/32.png) [@plotShower](https://community.plotly.com/u/plotShower)\ **Post date:** [January 17, 2018, 6:02pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/4 "2018-01-17T18:02:51Z")
Thanks all for your prompt reply. Dropdown won’t work well for my application as I will have a list of up to 10000 different curves I’d want to select. To manage the large number of curves I would create a textbox as an input to filter based on curve name. For example (see attached), let’s say I had curves for tests 1 to M and each test has a number of curves 1 to N. I would want to filter the multi select list box to just those that apply to test 1 and from there manually select individual curves to plot. I’d also want to filter based on other curve attributes that would be stored in a pandas data frame that are not associated with the curve name itself (e.g. test date). I’ve created this prototype in MATLAB, but I’d like to leverage python / DASH if possible. ![SampleUI](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/76b681bff9189c99d5b53d7a4ba907f4ddff435a.png) ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [January 18, 2018, 1:49am UTC](https://community.plotly.com/t/multi-select-list-box/7768/5 "2018-01-18T01:49:41Z")
By default the Dropdown component supports find-as-you-type, so you get part of the search functionality you describe with the textarea for free already. 10000 does seem like a lot to squeeze into a single dropdown though. What about breaking it out into two dropdpwns, one with the test number which triggers a callback to update the second dropdown with only the values that correspond to that test? ---
**Author:** ![chubukov](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@chubukov](https://community.plotly.com/u/chubukov)\ **Post date:** [January 18, 2018, 2:56am UTC](https://community.plotly.com/t/multi-select-list-box/7768/6 "2018-01-18T02:56:50Z")
> 10000 does seem like a lot to squeeze into a single dropdown I have used the multi-select dropdown for gene names (~25000 rows) and it works totally fine. I think the original poster should try it (maybe some of the redundant text in the names could be eliminated) ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [January 18, 2018, 3:19am UTC](https://community.plotly.com/t/multi-select-list-box/7768/7 "2018-01-18T03:19:59Z")
> [@chubukov](#): > > I have used the multi-select dropdown for gene names (~25000 rows) and it works totally fine. Ah, that’s good to know! ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [January 18, 2018, 5:08pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/8 "2018-01-18T17:08:41Z")
> [@chubukov](#): > > 10000 does seem like a lot to squeeze into a single dropdown In [make dropdowns with hundreds of thousands of options more performant by chriddyp · Pull Request #47 · plotly/dash-core-components · GitHub](https://github.com/plotly/dash-core-components/pull/47) I made the `dcc.Dropdown` component. Here is an example with 50k rows ![Dropdown with many options](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f17c42b76cecdedfc70a5cf9915ebf6591f3d47c.gif) ---
**Author:** ![plotShower](https://avatars.discourse-cdn.com/v4/letter/p/48db29/32.png) [@plotShower](https://community.plotly.com/u/plotShower)\ **Post date:** [January 18, 2018, 6:28pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/9 "2018-01-18T18:28:17Z")
Thanks Chris for this example. I think our users would prefer to have the option of seeing all the curves at once. I just stumbled upon the table experiment which seems like a better option. > **[plotly/dash-table-experiments](https://github.com/plotly/dash-table-experiments)** > > Prototypes of a Dash Table Component. Contribute to plotly/dash-table-experiments development by creating an account on GitHub. A couple other needs we have: 1. re-arrange the order of curves within the table (e.g. move all the common plotted curves to the top of the table) 2. create new columns on the fly (e.g. group curves together convenient to the analysis, this would be an alternative to having a tree list 3. filter through curves using wildcards (e.g. A\*rica would bring up America and Africa and A?rica would bring up Africa) ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [January 18, 2018, 7:35pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/10 "2018-01-18T19:35:40Z")
> [@plotShower](#): > > I think our users would prefer to have the option of seeing all the curves at once. Another option would be to build your own custom React.js component with the UI that you prefer, see [Build Your Own Components | Dash for Python Documentation | Plotly](https://plot.ly/dash/plugins) for documentation on that. > [@plotShower](#): > > A couple other needs we have: Also note that if your organization or company has the resources, Plotly’s advanced development team can be contracted to build out custom components or add features. For more, see [Get Pricing](https://plot.ly/dash/pricing/) or get in touch directly here: [Discover Typeform, where forms = fun](https://plotly.typeform.com/to/rkO85m) ---
**Author:** ![vivekvs1](https://avatars.discourse-cdn.com/v4/letter/v/c2a13f/32.png) [@vivekvs1](https://community.plotly.com/u/vivekvs1)\ **Post date:** [September 20, 2018, 11:55pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/11 "2018-09-20T23:55:23Z")
I created something similar here: > [@Custom Dash component: Dual-listbox](https://community.plotly.com/t/custom-dash-component-dual-listbox/13792): > > Hello everyone\< I have published a new Dash Component that renders dual-listbox. Please check it out at [GitHub - vivekvs1/dash-dual-listbox: Dual listbox for Dash. Original component: https://rawgit.com/jyotirmaybanerjee/react-duallist/master/example/examples.html#](https://github.com/vivekvs1/dash-dual-listbox) [listbox] Let me know if it helps. ---
**Author:** ![useradam\_123](https://avatars.discourse-cdn.com/v4/letter/u/b77776/32.png) [@useradam\_123](https://community.plotly.com/u/useradam_123)\ **Post date:** [July 8, 2022, 6:26pm UTC](https://community.plotly.com/t/multi-select-list-box/7768/12 "2022-07-08T18:26:42Z")
really old thread are you around, i took a look at your dual list package and it works great, however your only example: > doesn’t line the list boxes up in a nice row, its left on top of middle buttons on top of right list, do you know how you would configure the .css or the python code to get proper alignment ? thanks!