CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-streamlit

The fastest way to build and share data apps

Overview
Eval results
Files

input-widgets.mddocs/

Input Widgets

Interactive form controls for user input. These widgets enable user interaction by capturing clicks, text input, selections, and file uploads. All widgets return values that can be used to control application flow and data processing.

Capabilities

Buttons and Actions

Trigger actions and downloads through button interactions.

def button(label: str, key: str = None, help: str = None, on_click=None, args=None, kwargs=None, type: str = "secondary", disabled: bool = False, use_container_width: bool = False) -> bool:
    """
    Display a button widget that returns True when clicked.
    
    Parameters:
    - label: Text displayed on the button
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_click: Callback function executed on click
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    - type: Button type ("primary" or "secondary")
    - disabled: Whether the button is disabled
    - use_container_width: Whether to use full container width
    
    Returns:
    bool: True if button was clicked in this run, False otherwise
    """

def download_button(label: str, data, file_name: str = None, mime: str = None, key: str = None, help: str = None, on_click=None, args=None, kwargs=None, type: str = "secondary", disabled: bool = False, use_container_width: bool = False) -> bool:
    """
    Display a download button that triggers file download.
    
    Parameters:
    - label: Text displayed on the button
    - data: Raw data, string, or bytes to download
    - file_name: Name for the downloaded file
    - mime: MIME type of the file
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_click: Callback function executed on click
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    - type: Button type ("primary" or "secondary")
    - disabled: Whether the button is disabled
    - use_container_width: Whether to use full container width
    
    Returns:
    bool: True if button was clicked in this run, False otherwise
    """

Usage Example

import streamlit as st

# Simple button
if st.button("Click me!"):
    st.write("Button was clicked!")

# Download button
csv_data = "Name,Age\nAlice,25\nBob,30"
st.download_button(
    label="Download CSV",
    data=csv_data,
    file_name="data.csv",
    mime="text/csv"
)

Boolean Input

Capture boolean (true/false) user selections.

def checkbox(label: str, value: bool = False, key: str = None, help: str = None, on_change=None, args=None, kwargs=None) -> bool:
    """
    Display a checkbox widget.
    
    Parameters:
    - label: Text displayed next to the checkbox
    - value: Initial checked state
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    bool: Current checked state of the checkbox
    """

Usage Example

import streamlit as st

# Checkbox for agreement
agree = st.checkbox("I agree to the terms and conditions")

if agree:
    st.write("Thank you for agreeing!")

Selection Widgets

Capture single or multiple selections from predefined options.

def radio(label: str, options, index: int = 0, key: str = None, help: str = None, on_change=None, args=None, kwargs=None, horizontal: bool = False):
    """
    Display radio button selection widget.
    
    Parameters:
    - label: Text displayed above the radio buttons
    - options: List of options to choose from
    - index: Index of the initially selected option
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when selection changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    - horizontal: Whether to display options horizontally
    
    Returns:
    The selected option value
    """

def selectbox(label: str, options, index: int = 0, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a dropdown selectbox widget.
    
    Parameters:
    - label: Text displayed above the selectbox
    - options: List of options to choose from
    - index: Index of the initially selected option
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when selection changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    The selected option value
    """

def multiselect(label: str, options, default=None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a multiselect widget for choosing multiple options.
    
    Parameters:
    - label: Text displayed above the multiselect
    - options: List of options to choose from
    - default: List of initially selected options
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when selection changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    List of selected option values
    """

Usage Example

import streamlit as st

# Radio buttons
choice = st.radio(
    "Choose your favorite color:",
    ["Red", "Green", "Blue"]
)

# Selectbox
city = st.selectbox(
    "Select your city:",
    ["New York", "London", "Tokyo", "Sydney"]
)

# Multiselect
interests = st.multiselect(
    "Select your interests:",
    ["Sports", "Music", "Movies", "Reading", "Travel"],
    default=["Music"]
)

st.write(f"You chose {choice}, live in {city}, and are interested in {interests}")

Slider Inputs

Capture numeric values through intuitive slider interfaces.

def slider(label: str, min_value=None, max_value=None, value=None, step=None, format: str = None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a slider widget for numeric input.
    
    Parameters:
    - label: Text displayed above the slider
    - min_value: Minimum value allowed
    - max_value: Maximum value allowed  
    - value: Initial value (or tuple for range slider)
    - step: Step size for value increments
    - format: Printf-style format string for display
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    The selected numeric value or tuple for range slider
    """

def select_slider(label: str, options, value=None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a slider widget for selecting from predefined options.
    
    Parameters:
    - label: Text displayed above the slider
    - options: List of options to choose from
    - value: Initial selected value
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    The selected option value
    """

Usage Example

import streamlit as st

# Numeric slider
age = st.slider("Select your age:", 0, 100, 25)

# Range slider
price_range = st.slider(
    "Select price range:",
    0.0, 100.0, (20.0, 80.0)
)

# Select slider with custom options
size = st.select_slider(
    "Select size:",
    options=["XS", "S", "M", "L", "XL"],
    value="M"
)

st.write(f"Age: {age}, Price range: ${price_range[0]}-${price_range[1]}, Size: {size}")

Text Input

Capture text and numeric input from users.

def text_input(label: str, value: str = "", max_chars: int = None, key: str = None, type: str = "default", help: str = None, autocomplete: str = None, on_change=None, args=None, kwargs=None, placeholder: str = None, disabled: bool = False) -> str:
    """
    Display a single-line text input widget.
    
    Parameters:
    - label: Text displayed above the input
    - value: Initial text value
    - max_chars: Maximum number of characters allowed
    - key: Unique key for the widget
    - type: Input type ("default" or "password")
    - help: Tooltip text shown on hover
    - autocomplete: Autocomplete attribute value
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    - placeholder: Placeholder text shown when empty
    - disabled: Whether the input is disabled
    
    Returns:
    str: Current text value
    """

def text_area(label: str, value: str = "", height: int = None, max_chars: int = None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None, placeholder: str = None) -> str:
    """
    Display a multi-line text input widget.
    
    Parameters:
    - label: Text displayed above the text area
    - value: Initial text value
    - height: Height of the text area in pixels
    - max_chars: Maximum number of characters allowed
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    - placeholder: Placeholder text shown when empty
    
    Returns:
    str: Current text value
    """

def number_input(label: str, min_value=None, max_value=None, value=None, step=None, format: str = None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None, placeholder: str = None):
    """
    Display a numeric input widget.
    
    Parameters:
    - label: Text displayed above the input
    - min_value: Minimum value allowed
    - max_value: Maximum value allowed
    - value: Initial numeric value
    - step: Step size for value increments
    - format: Printf-style format string for display
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    - placeholder: Placeholder text shown when empty
    
    Returns:
    int or float: Current numeric value
    """

Usage Example

import streamlit as st

# Text inputs
name = st.text_input("Enter your name:", placeholder="Your full name")
password = st.text_input("Enter password:", type="password")

# Text area
feedback = st.text_area(
    "Leave feedback:",
    height=100,
    placeholder="Tell us what you think..."
)

# Number input
quantity = st.number_input(
    "Quantity:",
    min_value=1,
    max_value=100,
    value=1,
    step=1
)

st.write(f"Hello {name}! You ordered {quantity} items.")

Date and Time Input

Capture date and time values from users.

def date_input(label: str, value=None, min_value=None, max_value=None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a date input widget.
    
    Parameters:
    - label: Text displayed above the date picker
    - value: Initial date value (datetime.date object or None)
    - min_value: Minimum date allowed
    - max_value: Maximum date allowed
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    datetime.date: Selected date
    """

def time_input(label: str, value=None, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a time input widget.
    
    Parameters:
    - label: Text displayed above the time picker
    - value: Initial time value (datetime.time object or None)
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when value changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    datetime.time: Selected time
    """

Usage Example

import streamlit as st
from datetime import datetime, date, time

# Date input
selected_date = st.date_input(
    "Select a date:",
    value=date.today()
)

# Time input
selected_time = st.time_input(
    "Select a time:",
    value=time(9, 0)
)

st.write(f"You selected {selected_date} at {selected_time}")

File and Media Input

Handle file uploads and camera input for multimedia content.

def file_uploader(label: str, type=None, accept_multiple_files: bool = False, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a file uploader widget.
    
    Parameters:
    - label: Text displayed above the file uploader
    - type: List of allowed file extensions (e.g., ["csv", "txt"])
    - accept_multiple_files: Whether to allow multiple file selection
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when files change
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    UploadedFile or List[UploadedFile] or None: Uploaded file(s)
    """

def camera_input(label: str, key: str = None, help: str = None, on_change=None, args=None, kwargs=None):
    """
    Display a camera input widget for taking photos.
    
    Parameters:
    - label: Text displayed above the camera input
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when photo is taken
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    UploadedFile or None: Captured photo file
    """

Usage Example

import streamlit as st
import pandas as pd

# File uploader
uploaded_file = st.file_uploader("Choose a CSV file", type="csv")

if uploaded_file is not None:
    df = pd.read_csv(uploaded_file)
    st.write("File contents:")
    st.dataframe(df)

# Multiple file upload
uploaded_files = st.file_uploader(
    "Choose multiple images",
    type=["png", "jpg", "jpeg"],
    accept_multiple_files=True
)

for uploaded_file in uploaded_files:
    st.image(uploaded_file)

# Camera input
camera_photo = st.camera_input("Take a photo")

if camera_photo is not None:
    st.image(camera_photo)

Color Input

Capture color selections from users.

def color_picker(label: str, value: str = "#000000", key: str = None, help: str = None, on_change=None, args=None, kwargs=None) -> str:
    """
    Display a color picker widget.
    
    Parameters:
    - label: Text displayed above the color picker
    - value: Initial color value in hex format
    - key: Unique key for the widget
    - help: Tooltip text shown on hover
    - on_change: Callback function executed when color changes
    - args: Arguments passed to callback function
    - kwargs: Keyword arguments passed to callback function
    
    Returns:
    str: Selected color in hex format (e.g., "#FF0000")
    """

Usage Example

import streamlit as st

# Color picker
color = st.color_picker("Pick a color:", "#FF0000")

st.write(f"Selected color: {color}")

# Use the color in styling
st.markdown(
    f'<div style="background-color: {color}; padding: 10px; border-radius: 5px;">'
    f'This div has the selected background color!'
    f'</div>',
    unsafe_allow_html=True
)

Widget State and Keys

All widgets support a key parameter for unique identification and state management:

# Widget with key for session state access
if st.button("Increment", key="increment_btn"):
    if "counter" not in st.session_state:
        st.session_state.counter = 0
    st.session_state.counter += 1

st.write(f"Counter: {st.session_state.get('counter', 0)}")

Install with Tessl CLI

npx tessl i tessl/pypi-streamlit@1.16.0

docs

caching-config.md

charts-media.md

custom-components.md

display-elements.md

index.md

input-widgets.md

layout-containers.md

tile.json