Dynamic Container with Active Tabs

I am loving Streamlit and grateful for all the work that has gone into this project!

I am creating an app with a side column that will display 2 select boxes. Test code can be found below. The first select box will allow the user to choose a Model. Depending on the model chosen, a different number of tabs will display. The second select box should be dynamic depending on the tab that is currently active which is where I run into trouble. I know this can be achieved with the empty layout api but am having trouble overriding the layout because I’m not able to actually see which tab is active.


import streamlit as st

# page config

# split window into 2 column-wise sections
#     one for options, one for content
options_col, content_col = st.columns([2, 5], gap="large")

with options_col:
    # model options
    model_selection = st.selectbox('Model', ["Test 1", "Test 2"], key="model_selection")
    # dynamic filters
    filter_container = st.empty()

with content_col:
    if model_selection == "Test 1":
        st.markdown("## Test 1 Model")

        # list tabs
        test1_tab1, test1_tab2 = st.tabs(["Test 1 Tab 1", "Test 1 Tab 2"])
        with test1_tab1:
            with filter_container:
                test1_tab1_selectbox = st.selectbox('Test 1 Tab 1 Selectbox', ['Test 1 Select 1', 'Test 1 Select 2'],

        with test1_tab2:
            with filter_container:
                test1_tab2_selectbox = st.selectbox('Test 1 Tab 2 Selectbox', ['Test 1 Select 1'],

    elif model_selection == "Test 2":
        st.markdown("## Test 2 Model")

        # list tabs
        tabs = st.tabs(["Test 2 Tab 1"])
        with tabs[0]:
            with filter_container:
                test2_tab1_selectbox = st.selectbox('Test 2 Tab 1 Selectbox', ['Test 2 Select 1', 'Test 2 Select 2'],

Here is a picture of the problem I am facing. When I am on Tab 1 for model Test 1, it’s coresponding select box doesnt appear. Is there a way around this or a way to determine which tab is active?
Screen Shot 2022-08-04 at 5.32.04 PM

1 Like

I have this exact issue.

For exclusive options, the tab container is not so useful unless it can be determined what the user selected.

Eager to see if there’s a solution.

1 Like

Unfortunately at this point the tabs container is purely a visual element. At some point we may add functionality like this to allow more programmatic interaction with tabs, but for now it’s purely for visual organization.

For now, I would recommend a third selectbox in place of the tabs for selecting the model.