Can someone help me to create search bar similar to attached image

[sainisanjay]

I would like to have two options for querying data (similar to chagpt UI)

1. Web Search Enabled (when the blue-colored button is active in the second image): The query should be searched on the web.
2. Web Search Disabled (when the button is inactive): The query should be answered using the internal database.

If implementing this in Streamlit is not feasible, an alternative approach can be used:

• A search bar with a web search toggle button below it.
• Clicking the button enables web search (changes color).
• Clicking it again restores the original color and switches back to internal database search.

[blackary]

You can get the basic functionality using segmented controls, like this:

query = st.text_input(
    label="", placeholder="Ask anything", label_visibility="collapsed"
)

option_icons = {
    "Search": ":material/language: Search",
    "Deep research": ":material/biotech: Deep research",
}

options = st.segmented_control(
    "",
    options=list(option_icons.keys()),
    format_func=lambda x: option_icons[x],
    label_visibility="collapsed",
    selection_mode="multi",
)

See it in action here: Playground • Streamlit

If you want to make it look more like the screenshots, you can add some CSS, but I would be cautious about adding too much, or it will get painful to maintain

import streamlit as st

# Configure page
st.set_page_config(page_title="Search Interface")

# Custom CSS to match the screenshot
st.html("""
<style>
    [data-testid="stTextInputRootElement"] {
        height: 125px;
    }
    [data-testid="stTextInput"] {
        margin-bottom: -52px;
    }

    .stButtonGroup {
        margin-left: 5px;
    }
    [data-testid="stTextInput"] > div > div > input {
        padding: 15px 20px;
        border-radius: 12px;
        border: 1px solid #ddd;
        font-size: 16px;
        background-color: #f8f9fa;
    }
</style>
""")

query = st.text_input(
    label="Ask anything",
    placeholder="Ask anything",
    label_visibility="collapsed",
)

option_icons = {
    "Search": ":material/language: Search",
    "Deep research": ":material/biotech: Deep research",
}

options = st.segmented_control(
    "Search options",
    options=list(option_icons.keys()),
    format_func=lambda x: option_icons[x],
    label_visibility="collapsed",
)

st.divider()

# Show the selected options
st.info(f"Search term: {query}")
st.info(f"Search type: {options}")

[sainisanjay]

@blackary Thank you so much—you saved my day! The second solution perfectly meets my requirements. I was previously using Streamlit 1.34.1, which didn’t have segmented_control, but after upgrading to Streamlit 1.43.2, it works smoothly.