Creating a nicely formatted search field?

Hello everybody,

Is there a way to create a nicely formatted search field in Streamlit and center it on the home page?

I am thinking of something as shown in the attached screen shot.

If this widget is not available yet, I think it would be a great addition for any data explorer app.

Any thoughts on this?

Thanks

Hello @mzeidhassan,

Here is the closest I could go :

  • I use unsafe_allow_html small hack to load custom CSS and change text color, background color and button radius. I think custom CSS is being internally discussed so we can expect some new things soon :slight_smile:
  • For horizontal layout of those widgets, there’s an issue for this, I’ll link your use case to it.
  • That magnifying glass in the Streamlit button…I have no idea yet how to inject material-icon or a png in the button legend, if you’re interested in that you may write an issue on Github :slight_smile:
  • When you say “search field”, do you want autocompletion too for your text_input ? The API could look like st.text_input(“Search”, autocomplete=function())…that could also be interesting

Anyway source code

style.css

body {
    color: #fff;
    background-color: #4F8BF9;
}

.stButton>button {
    color: #4F8BF9;
    border-radius: 50%;
    height: 3em;
    width: 3em;
}

.stTextInput>div>div>input {
    color: #4F8BF9;
}

app.py

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)

def remote_css(url):
    st.markdown(f'<link href="{url}" rel="stylesheet">', unsafe_allow_html=True)    

def icon(icon_name):
    st.markdown(f'<i class="material-icons">{icon_name}</i>', unsafe_allow_html=True)

local_css("style.css")
remote_css('https://fonts.googleapis.com/icon?family=Material+Icons')

icon("search")
selected = st.text_input("", "Search...")
button_clicked = st.button("OK")

1 Like

@andfanilo This is super-awesome indeed. Thanks a million for taking the time to write this. I really appreciate it. :+1:

autocomplete would be awesome for sure.

Thanks again!