Streamlit Part 3: Mastering Input Widgets

Mastering Input Widgets in Streamlit: A Comprehensive Guide

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials

🔗 Related Streamlit Tutorials:JustCodeIt

Streamlit has revolutionized the way we create web applications with Python. Its simplicity and power make it an excellent choice for data scientists and developers alike. In this post, we'll dive deep into one of Streamlit's most powerful features: input widgets. We'll explore 16 different input types, demonstrating how to use them effectively in your Streamlit apps.

Setting Up Our Streamlit App

Before we dive into the widgets, let's set up our Streamlit app:

import streamlit as st

st.set_page_config(layout="wide")
st.title("Streamlit Part 4: Inputs in Streamlit")

col1, col2 = st.columns(2)

We've imported Streamlit, set the page to wide layout, added a title, and created two columns for better organization of our widgets.

Button Inputs

1. Basic Button

The simplest form of input is a button. Here's how to create one:

with col1:
    st.subheader("1. Button")
    btn1 = st.button("Click Me", key="button", help="Click me to see the magic", type='secondary', disabled=False)
    if btn1:
        st.write("Button Clicked")

Detailed Explanation:

• The st.button() function creates a clickable button.
• key: A unique identifier for the button, useful when you have multiple buttons.
• help: Tooltip text that appears when hovering over the button.
• type: Determines the button's appearance ('primary', 'secondary', etc.).
• disabled: If set to True, the button will be grayed out and unclickable.

Use Cases:

• Triggering data processing or model training
• Submitting forms
• Refreshing data or charts

Tip: Use button states to control the flow of your app, like showing/hiding sections or triggering computations.

2. Link Button

For redirecting users to external links, use the link button:

st.subheader("2. Link Button")
if st.link_button("Click Me", "<https://www.streamlit.io/>"):
    st.write("Link Button Clicked")

Detailed Explanation:

• st.link_button() creates a button that, when clicked, opens a new tab with the specified URL.
• The first argument is the button text, and the second is the URL.

Use Cases:

• Linking to documentation or external resources
• Redirecting to social media profiles
• Connecting to related web applications

Tip: Use link buttons sparingly to avoid leading users away from your app unnecessarily.

3. Download Button

Allow users to download files directly from your app:

st.subheader("3. Download Button")
if st.download_button("Download Me", "hello world", "hello.txt", mime='text/plain'):
    st.write("Download Button Clicked")

Detailed Explanation:

• st.download_button() creates a button that triggers a file download when clicked.
• Arguments: button label, file content, filename, and MIME type.
• The MIME type specifies the file type (e.g., 'text/plain' for .txt, 'application/pdf' for .pdf).

Use Cases:

• Downloading generated reports or data
• Saving processed images or charts
• Exporting user-created content

Tip: You can dynamically generate file content based on user interactions or data processing results.

Selection Widgets

4. Checkbox

Checkboxes are great for toggling options:

st.subheader("4. Checkbox")
checkbox_val = st.checkbox("Check Me", value=False)
if checkbox_val:
    st.write("Checkbox Checked")

Detailed Explanation:

• st.checkbox() creates a toggle-able checkbox.
• The value parameter sets the initial state (True/False).

Use Cases:

• Enabling/disabling features in your app
• Selecting multiple options from a list
• Creating simple yes/no questions

Tip: Use checkboxes to control the visibility of other elements in your app for a more dynamic user experience.

5. Radio Buttons

When users need to select one option from a list:

st.subheader("5. Radio")
radio_val = st.radio("Select Color", ["Red", "Green", "Blue"], index=0)
if radio_val:
    st.write(f"You selected {radio_val}")

Detailed Explanation:

• st.radio() creates a set of radio buttons.
• The first argument is the label, followed by a list of options.
• index specifies the default selected option (0-based).

Use Cases:

• Choosing between mutually exclusive options
• Setting app modes or themes
• Filtering data based on categories

Tip: Use radio buttons when you have a small number of options (usually 2-5) that are mutually exclusive.

6. Select box

For dropdown selections:

st.subheader("6. Selectbox")
select_val = st.selectbox("Select Color", ["Red", "Green", "Blue", "Black"], index=1)
if select_val:
    st.write(f"You selected {select_val}")

Detailed Explanation:

• st.selectbox() creates a dropdown menu.
• Similar to radio buttons, but better for longer lists of options.
• index sets the default selected option.

Use Cases:

• Selecting from a long list of options
• Choosing categories or filters
• Setting parameters for data analysis

Tip: You can populate the options dynamically based on data or user inputs.

7. Multi-select

Allow users to select multiple options:

st.subheader("7. Multiselect")
multiselect_val = st.multiselect("Select Colors", ["Red", "Green", "Blue", "Black"], default=["Red"])
if multiselect_val:
    st.write(f"You selected {multiselect_val}")

Detailed Explanation:

• st.multiselect() creates a dropdown that allows multiple selections.
• default sets the initially selected options.

Use Cases:

• Selecting multiple filters for data
• Choosing features for a machine learning model
• Creating customizable dashboards

Tip: Use st.multiselect() when you want users to be able to select any number of options, including none or all.

8. Select Slider

For selecting from a range of discrete values:

st.subheader("8. Select Slider")
select_slider_val = st.select_slider("Select Value", options=range(1, 101), value=50)
if select_slider_val:
    st.write(f"You selected {select_slider_val}")

Detailed Explanation:

• st.select_slider() creates a slider with discrete values.
• options can be a range of numbers or a list of any values (even strings).
• value sets the initial position of the slider.

Use Cases:

• Selecting from a range of predefined values
• Creating rating systems
• Adjusting parameters with specific increments

Tip: You can use custom labels for the slider by passing a list of tuples (label, value) as options.

Text Inputs

9. Text Input

For single-line text input:

with col2:
    st.subheader("9. Text Input")
    text_input_val = st.text_input("Enter some text", value="", max_chars=50)
    if text_input_val:
        st.write(f"You entered {text_input_val}")

Detailed Explanation:

• st.text_input() creates a single-line text input field.
• value sets the initial text (if any).
• max_chars limits the number of characters that can be entered.

Use Cases:

• Getting user names or short responses
• Inputting search queries
• Entering simple parameters or values

Tip: Use the type parameter to create password fields or other specialized inputs.

10. Text Area

For multi-line text input:

st.subheader("10. Text Area")
text_area_val = st.text_area("Enter some text", value="", height=150, max_chars=200)
if text_area_val:
    st.write(f"You entered {text_area_val}")

Detailed Explanation:

• st.text_area() creates a multi-line text input box.
• height sets the vertical size of the box.
• max_chars limits the total character count.

Use Cases:

• Collecting longer text responses or comments
• Inputting multi-line code snippets
• Creating text-based data entry forms

Tip: You can use st.text_area() with natural language processing models for text analysis or generation tasks.

Numeric and Date/Time Inputs

11. Number Input

For numerical inputs:

st.subheader("11. Number Input")
number_input_val = st.number_input("Enter a number", value=0, min_value=0, max_value=100, step=1)
if number_input_val:
    st.write(f"You entered {number_input_val}")

Detailed Explanation:

• st.number_input() creates a field for numerical input.
• min_value and max_value set the allowed range.
• step defines the increment/decrement step.

Use Cases:

• Inputting quantities or amounts
• Setting numerical parameters for algorithms
• Creating age or rating inputs

Tip: You can use format parameter to control the display of decimal places.

12. Date Input

For selecting dates:

st.subheader("12. Date Input")
date_input_val = st.date_input("Enter a date")
if date_input_val:
    st.write(f"You selected {date_input_val}")

Detailed Explanation:

• st.date_input() creates a date picker widget.
• You can set min_value and max_value to limit the date range.

Use Cases:

• Selecting dates for data filtering
• Setting deadlines or event dates
• Inputting birthdates or other significant dates

Tip: Use datetime.date.today() as the default value to start with the current date.

13. Time Input

For selecting times:

st.subheader("13. Time Input")
time_input_val = st.time_input("Enter a time")
if time_input_val:
    st.write(f"You selected {time_input_val}")

Detailed Explanation:

• st.time_input() creates a time picker widget.
• Returns a datetime.time object.

Use Cases:

• Setting appointment times
• Configuring schedules
• Inputting time-based parameters

Tip: Combine with st.date_input() to create full datetime inputs.

Advanced Inputs

14. File Uploader

For uploading files:

st.subheader("14. File Uploader")
file_uploader_val = st.file_uploader("Upload a file", type=["png", "jpg", "txt"])
if file_uploader_val:
    st.write(f"You uploaded {file_uploader_val.name}")

Detailed Explanation:

• st.file_uploader() creates a file upload widget.
• type parameter limits the allowed file types.
• Returns a UploadedFile object that you can process.

Use Cases:

• Uploading images for processing
• Importing data files for analysis
• Allowing users to upload documents or media

Tip: Use st.file_uploader() in combination with libraries like Pillow or pandas to process uploaded files directly in your app.

15. Color Picker

For selecting colors:

st.subheader("15. Color Picker")
color_picker_val = st.color_picker("Pick a color", value="#00f900")
if color_picker_val:
    st.write(f"You picked {color_picker_val}")

Detailed Explanation:

• st.color_picker() creates a color selection widget.
• Returns the selected color as a hex string.

Use Cases:

• Customizing UI elements
• Selecting colors for data visualization
• Creating design tools

Tip: You can use the selected color to dynamically update the appearance of other elements in your app.

16. Camera Input

For capturing images using the device's camera:

st.subheader("16. Camera Input")
camera_input_val = st.camera_input("Take a picture", help="Capture an image using your camera")
if camera_input_val:
    st.write("Picture captured successfully")

Detailed Explanation:

• st.camera_input() creates a widget that accesses the user's camera.
• Returns an image file that can be processed or displayed.

Use Cases:

• Real-time image processing applications
• Document scanning features
• Interactive computer vision demos

Tip: Combine with image processing libraries like OpenCV to perform real-time analysis on captured images.

Conclusion

Streamlit's input widgets provide a powerful and flexible way to create interactive web applications. From simple buttons to complex file uploaders and camera inputs, these widgets cover a wide range of use cases. By mastering these input types, you can create rich, interactive Streamlit apps that engage users and provide meaningful interactions with your data and models.

Happy Streamlit coding!

🔗 Get the Code: GitHub - jamesbmour/blog_tutorials
🔗 Related Streamlit Tutorials:JustCodeIt
🍻 Support my work: Buy Me a Coffee