LEARN

Using the Text Input Component in Streamlit

A guide on implementing and customizing text input fields in Streamlit, including clearing inputs and autocomplete features.

Archie Sarre Wood
Archie Sarre Wood

How to Use the Text Input Component in Streamlit

Streamlit provides the st.text_input() function, allowing users to input text directly into your application. It is ideal for capturing user inputs, such as search terms, usernames, or other textual data.

Basic Syntax for Text Input

import streamlit as st

user_input = st.text_input("Enter your name:")
st.write("Hello,", user_input)

This creates a simple text input box.

Clearing Text Input in Streamlit

To clear text input after submission or action, use the key parameter combined with session state management:

import streamlit as st

if 'text' not in st.session_state:
    st.session_state.text = ''

def clear_text():
    st.session_state.text = ''

text_input = st.text_input("Enter something:", value=st.session_state.text, key='text')

if st.button('Clear Input'):
    clear_text()

This allows users to clear the input box by clicking a button.

Autocomplete Text Input in Streamlit

Streamlit’s basic text input does not directly support autocomplete. However, you can achieve similar functionality using st.selectbox() or third-party components:

Example with Selectbox for Autocomplete-like Functionality

import streamlit as st

options = ['apple', 'banana', 'cherry', 'date']
selected_option = st.selectbox("Choose a fruit or type:", options)
st.write("You selected:", selected_option)

This gives users a dropdown selection with autocomplete-like features.

Advanced Autocomplete with Third-Party Components

For advanced features, use Streamlit Components like streamlit_tags:

pip install streamlit-tags
import streamlit as st
from streamlit_tags import st_tags

keywords = st_tags(label='Type or select keywords:', text='Press enter to add more', suggestions=['apple', 'banana', 'cherry', 'date'])
st.write("Keywords:", keywords)

Alternative: Text Input in Evidence

For SQL-driven reporting and filtering, Evidence provides simple inputs without extensive Python scripting:

```sql filtered_data
SELECT * FROM users WHERE name LIKE '%{inputs.name}%';
```

<TextInput name="name" placeholder="Enter name" />
<DataTable data={filtered_data} />

This approach simplifies capturing and using text inputs directly in SQL-driven reports.

Conclusion

  • Streamlit’s st.text_input() is straightforward for capturing user text.
  • Clearing and autocomplete functionality require additional setup or components.
  • Evidence offers an alternative SQL-driven approach for integrating text inputs into reports.

Get Started with Evidence

Build beautiful data apps using Evidence

  • Ship reports in hours
  • Terse, expressive syntax
  • All in version control

Start Free Trial →