data/develop/api-reference/widgets/_index.md

metadata

title: Input widgets
slug: /develop/api-reference/widgets

Input widgets

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

Button elements

Button

Display a button widget.

clicked = st.button("Click me")

Download button

Display a download button widget.

st.download_button("Download file", file)

Form button

Display a form submit button. For use with st.form.

st.form_submit_button("Sign up")

Link button

Display a link button.

st.link_button("Go to gallery", url)

Page link

Display a link to another page in a multipage app.

st.page_link("app.py", label="Home", icon="🏠")
st.page_link("pages/profile.py", label="My profile")

Selection elements

Checkbox

Display a checkbox widget.

selected = st.checkbox("I agree")

Toggle

Display a toggle widget.

activated = st.toggle("Activate")

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"])

Select slider

Display a slider widget to select items from a list.

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

Color picker

Display a color picker widget.

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

Numeric input elements

Number input

Display a numeric input widget.

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

Slider

Display a slider widget.

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

Date and time input elements

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")

Text input elements

Text input

Display a single-line text input widget.

name = st.text_input("First name")

Text area

Display a multi-line text input widget.

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

Chat input

Display a chat input widget.

prompt = st.chat_input("Say something")
if prompt:
    st.write(f"The user has sent: {prompt}")

Other input elements

Data editor

Display a data editor widget.

edited = st.experimental_data_editor(df, num_rows="dynamic")

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")

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")

Tags

Add tags to your Streamlit apps. Created by @gagan3012.

from streamlit_tags import st_tags

st_tags(label='# Enter Keywords:', text='Press enter to add more', value=['Zero', 'One', 'Two'],
suggestions=['five', 'six', 'seven', 'eight', 'nine', 'three', 'eleven', 'ten', 'four'], maxtags = 4, key='1')

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)

Timeline

Display a Timeline in Streamlit apps using TimelineJS. Created by @innerdoc.

from streamlit_timeline import timeline

with open('example.json', "r") as f:
  timeline(f.read(), height=800)

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 Ace

Ace editor component for Streamlit. Created by @okld.

from streamlit_ace import st_ace

content = st_ace()
content

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

Streamlit Option Menu

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""",)