Input widgets

With widgets, Streamlit allows you to bake interactivity directly into your apps with buttons, sliders, text inputs, and more.

Button

Display a button widget.

clicked = st.button("Click me")

Download button

Display a download button widget.

st.download_button("Download file", file)

Checkbox

Display a checkbox widget.

selected = st.checkbox("I agree")

Radio

Display a radio button widget.

choice = st.radio("Pick one", ["cats", "dogs"])

Selectbox

Display a select widget.

choice = st.selectbox("Pick one", ["cats", "dogs"])

Multiselect

Display a multiselect widget. The multiselect widget starts as empty.

choices = st.multiselect("Buy", ["milk", "apples", "potatoes"])

Slider

Display a slider widget.

number = st.slider("Pick a number", 0, 100)

Select slider

Display a slider widget to select items from a list.

size = st.select_slider("Pick a size", ["S", "M", "L"])

Text input

Display a single-line text input widget.

name = st.text_input("First name")

Number input

Display a numeric input widget.

choice = st.number_input("Pick a number", 0, 10)

Text area

Display a multi-line text input widget.

text = st.text_area("Text to translate")

Date input

Display a date input widget.

date = st.date_input("Your birthday")

Time input

Display a time input widget.

time = st.time_input("Meeting time")

File uploader

Display a file uploader widget.

data = st.file_uploader("Upload a CSV")

Camera input

Display a widget that allows users to upload images directly from a camera.

image = st.camera_input("Take a picture")

Color picker

Display a color picker widget.

color = st.color_picker("Pick a color")

Third-party components

Streamlit Chat

Streamlit Component for a Chatbot UI. Created by @AI-Yash.

from streamlit_chat import message

message("My message")
message("Hello bot!", is_user=True)  # align's the message to the right

Select a single item from a list of options in a menu. Created by @victoryhb.

from streamlit_option_menu import option_menu

option_menu("Main Menu", ["Home", 'Settings'],
  icons=['house', 'gear'], menu_icon="cast", default_index=1)

Streamlit Extras

A library with useful Streamlit extras. Created by @arnaudmiribel.

from streamlit_extras.stoggle import stoggle

stoggle(
    "Click me!", """🥷 Surprise! Here's some additional content""",)

Streamlit Elements

Create a draggable and resizable dashboard in Streamlit. Created by @okls.

from streamlit_elements import elements, mui, html

with elements("new_element"):
  mui.Typography("Hello world")

Stqdm

The simplest way to handle a progress bar in streamlit app. Created by @Wirg.

from stqdm import stqdm

for _ in stqdm(range(50)):
    sleep(0.5)

Camera input live

Alternative for st.camera_input which returns the webcam images live. Created by @blackary.

from camera_input_live import camera_input_live

image = camera_input_live()
st.image(value)

Streamlit Chat

Streamlit Component for a Chatbot UI. Created by @AI-Yash.

from streamlit_chat import message

message("My message")
message("Hello bot!", is_user=True)  # align's the message to the right

Select a single item from a list of options in a menu. Created by @victoryhb.

from streamlit_option_menu import option_menu

option_menu("Main Menu", ["Home", 'Settings'],
  icons=['house', 'gear'], menu_icon="cast", default_index=1)

Streamlit Extras

A library with useful Streamlit extras. Created by @arnaudmiribel.

from streamlit_extras.stoggle import stoggle

stoggle(
    "Click me!", """🥷 Surprise! Here's some additional content""",)

Streamlit Elements

Create a draggable and resizable dashboard in Streamlit. Created by @okls.

from streamlit_elements import elements, mui, html

with elements("new_element"):
  mui.Typography("Hello world")

Camera input live

Alternative for st.camera_input which returns the webcam images live. Created by @blackary.

from camera_input_live import camera_input_live

image = camera_input_live()
st.image(value)

Streamlit Chat

Streamlit Component for a Chatbot UI. Created by @AI-Yash.

from streamlit_chat import message

message("My message")
message("Hello bot!", is_user=True)  # align's the message to the right

Select a single item from a list of options in a menu. Created by @victoryhb.

from streamlit_option_menu import option_menu

option_menu("Main Menu", ["Home", 'Settings'],
  icons=['house', 'gear'], menu_icon="cast", default_index=1)

Streamlit Extras

A library with useful Streamlit extras. Created by @arnaudmiribel.

from streamlit_extras.stoggle import stoggle

stoggle(
    "Click me!", """🥷 Surprise! Here's some additional content""",)

editSuggest edits

Input widgets

Button

Download button

Checkbox

Radio

Selectbox

Multiselect

Slider

Select slider

Text input

Number input

Text area

Date input

Time input

File uploader

Camera input

Color picker

Streamlit Chat

Streamlit Option Menu

Streamlit Extras

Streamlit Elements

Tags

Stqdm

Timeline

Camera input live

Streamlit Ace

Streamlit Chat

Streamlit Option Menu

Streamlit Extras

Streamlit Elements

Tags

Stqdm

Timeline

Camera input live

Streamlit Ace

Streamlit Chat

Streamlit Option Menu

Streamlit Extras

Still have questions?