Introduction to Streamlit Widgets

Streamlit has revolutionized the way we create web applications in Python. At the heart of this revolution are Streamlit widgets - interactive elements that allow users to interact with your app seamlessly. In this blog post, we'll explore various Streamlit widgets and how to use them effectively.

Basic Widgets

Let's start with some fundamental widgets that form the building blocks of any Streamlit app.

Button

The st.button() widget creates a clickable button:

import streamlit as st

if st.button('Click me!'):
    st.write('You clicked the button!')

This simple code creates a button that, when clicked, displays a message.

Checkbox

The st.checkbox() widget creates a toggle-able checkbox:

show_text = st.checkbox('Show text')

if show_text:
    st.write('This text is visible because you checked the box!')

Radio Button

For mutually exclusive options, use st.radio():

option = st.radio('Choose your favorite color:', ('Red', 'Green', 'Blue'))
st.write(f'Your favorite color is {option}')

Input Widgets

Streamlit offers various widgets for user input. Let's look at a few:

Text Input

Use st.text_input() for single-line text input:

name = st.text_input('Enter your name:')
st.write(f'Hello, {name}!')

Number Input

For numerical input, use st.number_input():

age = st.number_input('Enter your age:', min_value=0, max_value=120, step=1)
st.write(f'You are {age} years old')

Slider

Sliders are great for selecting values from a range:

volume = st.slider('Set the volume:', 0, 100, 50)
st.write(f'Volume is set to {volume}%')

Select Widgets

For choosing from a list of options, Streamlit provides several widgets:

Selectbox

Use st.selectbox() for dropdown selection:

fruit = st.selectbox('Choose a fruit:', ['Apple', 'Banana', 'Cherry'])
st.write(f'You selected: {fruit}')

Multiselect

For multiple selections, use st.multiselect():

options = st.multiselect('Choose your favorite colors:', ['Red', 'Green', 'Blue', 'Yellow'])
st.write('You selected:', ', '.join(options))

File Uploader

The st.file_uploader() widget allows users to upload files:

uploaded_file = st.file_uploader('Choose a CSV file', type='csv')
if uploaded_file is not None:
    data = pd.read_csv(uploaded_file)
    st.write(data)

Date and Time Widgets

Streamlit provides widgets for date and time input:

Date Input

Use st.date_input() for date selection:

date = st.date_input('Select a date:')
st.write(f'Selected date: {date}')

Time Input

For time selection, use st.time_input():

time = st.time_input('Set an alarm for:')
st.write(f'Alarm set for: {time}')

Advanced Widget Usage

Customizing Widget Appearance

You can customize the appearance of widgets using the key parameter:

st.button('Click me!', key='styled_button', help='This is a custom button')

Conditional Widgets

Create dynamic interfaces by conditionally displaying widgets:

if st.checkbox('Show advanced options'):
    st.slider('Advanced setting:', 0, 100, 50)

Widgets in Columns

Organize your layout using columns:

col1, col2 = st.columns(2)
with col1:
    st.button('Button 1')
with col2:
    st.button('Button 2')

Handling Widget States

Streamlit maintains widget states across reruns. Use the key parameter to uniquely identify widgets:

count = 0
if st.button('Increment', key='increment_button'):
    count += 1
st.write(f'Count: {count}')

Conclusion

Streamlit widgets are powerful tools for creating interactive web applications. By combining these widgets creatively, you can build complex, user-friendly interfaces with just a few lines of Python code. Experiment with different widgets, customize their appearance, and create dynamic layouts to take your Streamlit apps to the next level.