DocumentationsearchSearchrocket_launchGet startedInstallationaddFundamentalsaddFirst stepsaddcodeDevelopConceptsaddAPI referenceremovePAGE ELEMENTSWrite and magicaddText elementsaddData elementsaddChart elementsaddInput widgetsremoveBUTTONSst.buttonst.download_buttonst.form_submit_buttonlinkst.link_buttonst.page_linkSELECTIONSst.checkboxst.color_pickerst.multiselectst.radiost.selectboxst.select_sliderst.toggleNUMERICst.number_inputst.sliderDATE & TIMEst.date_inputst.time_inputTEXTst.chat_inputlinkst.text_areast.text_inputMEDIA & FILESst.camera_inputst.data_editorlinkst.file_uploaderMedia elementsaddLayouts and containersaddChat elementsaddStatus elementsaddThird-party componentsopen_in_newAPPLICATION LOGICNavigation and pagesaddExecution flowaddCaching and stateaddConnections and secretsaddCustom componentsaddUtilitiesaddConfigurationaddTOOLSApp testingaddCommand lineaddTutorialsaddQuick referenceaddweb_assetDeployConceptsaddStreamlit Community CloudaddStreamlit in Snowflakeopen_in_newOther platformsaddschoolKnowledge baseFAQInstalling dependenciesDeployment issuesHome/Develop/API reference/Input widgetsInput widgets
With widgets, Streamlit allows you to bake interactivity directly into your apps with buttons, sliders, text inputs, and more.
Button elements
ButtonDisplay a button widget.clicked = st.button("Click me")
Download buttonDisplay a download button widget.st.download_button("Download file", file)
Form buttonDisplay a form submit button. For use with st.form.st.form_submit_button("Sign up")
Link buttonDisplay a link button.st.link_button("Go to gallery", url)
Page linkDisplay 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
CheckboxDisplay a checkbox widget.selected = st.checkbox("I agree")
ToggleDisplay a toggle widget.activated = st.toggle("Activate")
RadioDisplay a radio button widget.choice = st.radio("Pick one", ["cats", "dogs"])
SelectboxDisplay a select widget.choice = st.selectbox("Pick one", ["cats", "dogs"])
MultiselectDisplay a multiselect widget. The multiselect widget starts as empty.choices = st.multiselect("Buy", ["milk", "apples", "potatoes"])
Select sliderDisplay a slider widget to select items from a list.size = st.select_slider("Pick a size", ["S", "M", "L"])
Color pickerDisplay a color picker widget.color = st.color_picker("Pick a color")

Numeric input elements
Number inputDisplay a numeric input widget.choice = st.number_input("Pick a number", 0, 10)
SliderDisplay a slider widget.number = st.slider("Pick a number", 0, 100)

Date and time input elements
Date inputDisplay a date input widget.date = st.date_input("Your birthday")
Time inputDisplay a time input widget.time = st.time_input("Meeting time")

Text input elements
Text inputDisplay a single-line text input widget.name = st.text_input("First name")
Text areaDisplay a multi-line text input widget.text = st.text_area("Text to translate")
Chat inputDisplay a chat input widget.prompt = st.chat_input("Say something")
if prompt:
    st.write(f"The user has sent: {prompt}")

Other input elements
Data editorDisplay a data editor widget.edited = st.experimental_data_editor(df, num_rows="dynamic")
File uploaderDisplay a file uploader widget.data = st.file_uploader("Upload a CSV")
Camera inputDisplay a widget that allows users to upload images directly from a camera.image = st.camera_input("Take a picture")

Third-party componentsThese are featured components created by our lovely community. If you don't see what you're looking for, check out our Components Hub app and Streamlit Extras for more examples and inspiration! PreviousStreamlit ChatStreamlit 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 MenuSelect 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 ExtrasA library with useful Streamlit extras. Created by @arnaudmiribel.from streamlit_extras.stoggle import stoggle

stoggle(
    "Click me!", """🥷 Surprise! Here's some additional content""",)
Streamlit ElementsCreate 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")
TagsAdd 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')
StqdmThe 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)
TimelineDisplay 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 liveAlternative 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 AceAce editor component for Streamlit. Created by @okld.from streamlit_ace import st_ace

content = st_ace()
content
Streamlit ChatStreamlit 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 MenuSelect 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 ExtrasA library with useful Streamlit extras. Created by @arnaudmiribel.from streamlit_extras.stoggle import stoggle

stoggle(
    "Click me!", """🥷 Surprise! Here's some additional content""",)
Streamlit ElementsCreate 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")
TagsAdd 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')
StqdmThe 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)
TimelineDisplay 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 liveAlternative 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 AceAce editor component for Streamlit. Created by @okld.from streamlit_ace import st_ace

content = st_ace()
content
Streamlit ChatStreamlit 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 MenuSelect 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 ExtrasA library with useful Streamlit extras. Created by @arnaudmiribel.from streamlit_extras.stoggle import stoggle

stoggle(
    "Click me!", """🥷 Surprise! Here's some additional content""",)
 NextPrevious: Chart elementsNext: st.buttonforumStill have questions?Our forums are full of helpful information and Streamlit experts.HomeContact UsCommunity© 2024 Snowflake Inc.Cookie policy