# Dropdown that allows "selecting" a non-existing option

**URL:** <https://community.plotly.com/t/dropdown-that-allows-selecting-a-non-existing-option/89962>\
**Category:** Dash Python\
**Created:** [January 16, 2025, 6:23pm UTC](https://community.plotly.com/t/dropdown-that-allows-selecting-a-non-existing-option/89962 "2025-01-16T18:23:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mingw64](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mingw64](https://community.plotly.com/u/mingw64)\
**Post date:** [January 16, 2025, 6:23pm UTC](https://community.plotly.com/t/dropdown-that-allows-selecting-a-non-existing-option/89962/1 "2025-01-16T18:23:21Z")

</div>

Hi all,

I’d like my users to select from an existing list in a dropdown, but also allow them to add a new item if needed.

Obviously I can create separate elements like a button to add a new item, a text input to enter it, etc.  
But I’d like to solve this more elegantly using a single dropdown.

From my experience and after a thorough read of the documentation, this doesn’t seem natively possible.

I’ve been thinking of the following hack using a clientside callback (required to best track typing speed).

1. Ouput is the ‘options’ of the dropdown
2. Input is the ‘search\_value’
3. State of ‘options’
4. Code checks if search\_value is not in ‘options’, in which case it adds it there. It also stores in a dcc.store the new option and on the next callback fire (character added/deleted) it deletes the old “new” option and adds a new one.

I didn’t implement this yet so not sure how cleanly it will actually work. Will update after I do.

Can anyone suggest more or better solutions?

Thank you.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [January 16, 2025, 8:14pm UTC](https://community.plotly.com/t/dropdown-that-allows-selecting-a-non-existing-option/89962/2 "2025-01-16T20:14:08Z")

</div>

Hi @mingw64

You could try using the `dmc.TagsInput`

> **[Dash Mantine Components | TagsInput](https://www.dash-mantine-components.com/components/tagsinput)**
>
> Capture a list of values from user with free input and suggestions

---

<div class="post-metadata">

**Author:** ![mingw64](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mingw64](https://community.plotly.com/u/mingw64)\
**Post date:** [January 17, 2025, 1:09pm UTC](https://community.plotly.com/t/dropdown-that-allows-selecting-a-non-existing-option/89962/3 "2025-01-17T13:09:53Z")

</div>

Interesting! This is close to what I had it mind.  
Do I need to use the whole MantineProvider structure and other dmc stuff for that? Because right now I’m using dbc for most of the app and I prefer not to bring the entire dmc scaffolding just for a single component.