Modal/pop-up widget

[arraydude]

Problem

As a user I would like to show some specific data within a modal

Solution

https://baseweb.design/components/modal/

Additional context

User question: https://github.com/streamlit/streamlit/issues/1337

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[andfanilo]

This would be an interesting usecase.

I know if I had a Modal at hand, if possible I'd like to use it like I use the sidebar, that is enable Streamlit widgets inside a modal (button, file_uploader...).

That would require a bit of API design thinking though around composing what's inside the modal with different st calls inside, and managing enter/exit calls through a context manager.

quickly jotting an idea that really is just an idea without too much thinking:

df = None
with st.modal(label_ok_button, label_cancel_button) as m: 
    m.header("Hello world, input your file")
    f = m.file_uploader(...)
    while not f:
        m.markdown("Waiting for your input")
    df = process_file(f)

[moises-catala-sonosuite]

This feature would be a great addition!

[marcbuilds]

Also going to add that this would be hugely useful for some projects I'm working on. My use case is that the user is committing to sending an external API POST request, but needs a modal dialogue with a confirmation of what is about to be sent (a list of the variables prepared for the request), to ensure they are performing the correct action.

I'll add that perhaps this is veering a bit outside the scope of Streamlit as a whole, so understanadbly might not be where the focus should be for the team.

[durd07]

Hi,

Any update on this line?

[Mohammadabd]

Following...

[Sriram-bb63]

I would love to get this feature asap

[bbelescot]

I think it'd be a killer feature! Following this :)

[danielhangan]

I also needed this feature but I found a temporary workaround using st.expander()

modal = st.expander("Advanced options")

option_1 = modal.checkbox("Option 1")
option_2 = modal.checkbox("Option 2")
option_3 = modal.checkbox("Option 3")
option_4 = modal.checkbox("Option 4")

if option_1:
   st.write("Hello world 1")

if option_2:
   st.write("Hello world 2")

if option_3:
   st.write("Hello world 3")

if option_4:
   st.write("Hello world 4")

[ro1and]

Following as well! This would be a really nice addition to Streamlit

[tyrin]

This feature would be super useful in a bunch of use cases:

• legend information
• "how do I use/interpret this graph" help for new users
• popups from within visualizations

[abedhammoud]

It would be a great feature to have! Thank you for the excellent work you have done already!

[oliverfunk]

Would be a great feature! Could show warning dialogs etc.

[andfanilo]

In the meantime you could try the modal example in the experimental section of the Hydralit Components repo by @TangleSpace

Have a nice day, Fanilo

[corticalstack]

@andfanilo had a look at the example modal popup from the hydralit package, could'nt see if tehre's a way to pass in id or other identifier should there be multipel buttons (say in a list) that potentially can call the popup?

[lhlong]

how's this going on?

[PvanHengel]

Agree this is a great feature request, where can we find a list of all features and vote them up down? This one belongs at the top!

[andfanilo]

There's a roadmap here: https://share.streamlit.io/streamlit/roadmap/ But I think the thumbs up counter for the issue on the first message is part of what the team considers to prioritize, alongside other more internal stuff. Fanilo

[MrDebugger]

Following 🥶

[naorpeled]

Would love to help with this if needed 🙏

[littleK0i]

Following as well.

[Behordeun]

I am looking forward to the release of the pop-up feature. It will be a great one for all users.

[koenvo]

Not sure if useful but I created this project a while ago: https://github.com/teamtv/streamlit_modal

[matipina]

Following up!

[jrieke]

Hey all! We're currently figuring out the best way to do this and working on a prototype. We won't launch this immediately but I guess sometime during the summer. Will let you know more soon!

[jrieke]

Hey all! We've been prototyping quite a bit in the past few weeks. We now have a first draft for how st.dialog might work. We're still figuring out details but I thought I'd already post our proposal here to get some first feedback! Please let me know what you think, especially about the open questions at the end.

Demo

https://user-images.githubusercontent.com/5103165/228372761-84890e83-7399-414f-b24b-4279baacb790.mp4

Proposed API for st.dialog

st.dialog(
    title,
    *,
    close_on_submit=True,
    clear_on_close=True,
    clear_on_submit=False,
    dismissible=True,
    key=None
)

Docstring

Create a modal dialog that shows up as an overlay on top of the app.

A dialog is a container that contains elements and widgets. To add elements to a dialog, you can use with notation or just call methods directly on the dialog. See examples below.

Dialogs work similarly to forms:

• It can contain one or multiple submit buttons via st.form_submit_button.
• When the viewer interacts with a widget inside of a dialog, the app does not rerun. Only when a submit button is pressed, are all widget values inside the dialog sent to Streamlit in a batch.
• st.button and st.download_button cannot be added to dialogs.
• Dialogs cannot contain other dialogs or forms.

But there are also some differences:

• Dialogs do not have to contain a submit button (only if dismissible is set to False).
• Dialogs need to be opened by calling their .open() method in order to show them. See examples below.
• Dialogs are closed automatically when pressing a submit button, as long as close_on_submit is set to True (the default). If it is set to False, you need to manually close the dialog by calling .close() on it. See examples below.

Parameters

• title (str): The title of the dialog, displayed at the top.
• close_on_submit (bool): If True, the dialog with be closed when a submit button is pressed. If False, the dialog needs to be manually closed by calling .close() on the return object. This is useful e.g. to validate widget input and only close the dialog if it’s valid. Defaults to True.
• clear_on_close (bool): If True, all widgets inside the dialog will be reset to their default values when the form closes. Defaults to True. Note that custom components are unaffected by this parameter and will not be reset.
• clear_on_submit (bool): If True, all widgets inside the dialog will be reset to their default values when a submit button is pressed. Defaults to False. Note that custom components are unaffected by this parameter and will not be reset.
• dismissible (bool): If True, the dialog shows a close button in the top right and can be dismissed by clicking on this button or on the background of the app, or by pressing Esc. Note: if dismissible is set to False, the dialog has to contain a submit button. Defaults to True.
• key (str): A string that identifies the dialog. If this is omitted, a key will be generated for the dialog based on its title.

Examples

Create a simple dialog that just shows text to the user:

import streamlit as st

dial = st.dialog("Warning")
dial.write("Here's a warning!")

if st.button("Show warning"):
    dial.open()

Of course, you could also show charts, dataframes, or any other static element instead. Note that this dialog doesn’t contain a submit button. That’s valid as long as you don’t set dismissible to False.

Create a dialog with interactive widgets and retrieve their values:

import streamlit as st

dial = st.dialog("Data entry")
with dial:
    name = st.text_input("What's your name?")
    age = st.number_input("What's your age?", min_value=0)
    submitted = st.form_submit_button("Submit")

if st.button("Enter data"):
    dial.open()

if submitted:
    st.write(f"Your name is {name} and you are {age} years old.")

Note that you should always create the dialog outside of where you are actually opening it! Here, we are creating the dialog on the top level of the code. Inside the if st.button(”Enter data”) block, we are just calling dial.open(). If you would also create the dialog inside of that block, it would be impossible to retrieve name and age, the return values of the widgets: the dialog code would only be run directly after the viewer pressed the “Enter data” button. Once they click the submit button inside the dialog, the “Enter data” button would return False again, and the dialog code wouldn’t be called at all – therefore not setting name and age.

Create a dialog that is closed programmatically, e.g. after validating the user input:

import streamlit as st

forbidden_animals = ["Lion", "Snake", "Shark"]

dial = st.dialog("Animal check", close_on_submit=False)
with dial:
    animal = st.text_input("Enter the animal")
    if st.form_submit_button("Submit"):
        if animal in forbidden_animals:
            st.error("This animal is forbidden! Try another one.")
        else:
            dial.close()

if st.button("Check an animal"):
    dial.open()

Open questions

1. Should st.dialog work like a form (as proposed above) or just like a general container that reruns on every interaction with a widget? The nice thing about having it like a form is that it saves us a whole lot of trouble with the execution model because the app only reruns when you submit/close the dialog.
2. Should we rename st.form_submit_button to st.submit_button? Might be a nice clean up but would be annoying to people who currently use st.form_submit_button in their app.
3. Should we call the first parameter title (a bit closer to what it actually does) or label (a bit closer to widgets)?
4. Should we have clear_on_close and clear_on_submit as two separate parameters or should we merge them toclear="close"|"submit"|False? Might be cleaner but then we’d either deviate from the API of st.form (which has clear_on_submit) or we’d need to deprecate clear_on_submit in st.form.

[fplanque]

Great!

1. As proposed above is already great! Release it! ;) I would suggest to add an mode="form"|"container" param when you can. I am very much in favor of minimizing re-runs every time it's possible.
2. st.submit_button is much nicer. You could phase out the other one with a very clear warning message that explicitly says what code to change to what.
3. I prefer title. It definitely does not feel like a label, nor does the dialog feel like a widget.
4. Two separate params seems absolutely fine to me.

[shakamoushie]

This feature was much awaited!

1. I think st.dialog working like a form would be better, even though its child widgets wont be able to have independant logic. Basis the code, I assume columns are allowed within st.dialog.
2. I would suggest that you rename st.form_submit_button to st.submit_button. All it would require is a global find-replace in any legacy code.
3. 'title' seem appropriate for the first parameter.
4. This would seem better: clear="close"|"submit"|False

[aymeric-roucher]

Currently I have been searching a long time for a way for user to display/hide a big text without taking up the huge space that st.expander currently takes. So I'm also waiting for this release! Regarding point 1, I think it's fine if it works like a form, most usecases won't need reruns.

[kaankork]

The demo looks great! When do you plan on releasing? 😄

[abikkani1]

Also would love this!

[Davipar]

Amazing demo! looking forward to testing it!

[dwvisser]

It's probably out of scope for the proposal shared above, but I would love if the dialog could have its height and width specified, and be able to scroll lengthy contents with its own scrollbar. One example of this: https://getbootstrap.com/docs/5.3/components/modal/#scrolling-long-content

[kobic8]

am also intrested in pop-up dialog feature! :) thanks

[kacper-kedzierski-kinesso]

Awesome! looking forward giving it a try

[nlykousas]

I found this: https://experimental-modals.streamlit.app Does anyone know if this is the official yet unreleased modal functionality or some other component?

[cquangc]

This is incredible! Is there a way for us to look at the code? This is exactly the type of thing I would like to build

[mingjun1120]

I found this: https://experimental-modals.streamlit.app Does anyone know if this is the official yet unreleased modal functionality or some other component?

It is still not officially working, I have just tried it out. Hope the Streamlit Team can release this feature ASAP because it really suits my case!

[rotrigoh]

Following :)

[djsamyak]

Would be great feature. Following!

[DanielMajer24]

Following! This will be a great addition.

[gsidsid]

need this stat. looking forward

[victorccaldas]

The demo is perfectly what everyone needs, and seems to be ready for release. Also being able to set height and width is nice, but not necessary for first launch. It's perfect as is

[yulevern]

This is great please release it

[tyrin]

Turns on Patsy Cline... "Please release me, let me go....."

[AunRaza21]

Demo looks amazing. Waiting for it.

[julienbosse]

The prototype looks great. Can't wait !

[chrda81]

Any chance that this dialog feature is released earlier as mentioned on the roadmap forecast?

[corticalstack]

Here also awaiting release of this much needed element

[rrhurtado]

Waiting for the feature release. Thanks!

[Frank17]

Also waiting on this feature!