import streamlit as st
name = st.text_input("Enter your name")
st.write(f"Hello {name}! Welcome to Streamlit.")14 An Overview of Available Input Types
There are a large number of different input types available in Streamlit.
In streamlit, if we save the output of one of the built-in input widgets to a variable, this variable will be the value the user has selected, and will be used anywhere you subsequently reference this value in the app.
Let’s start by having a text input to greet the user.
Try changing the value in the input box each time, pressing enter when you have finished typing. Notice how the sentence underneath the text box updates.
14.1 Using inputs in calculations
In addition to text, we often want to be able to get numeric inputs from users.
Number boxes and sliders are two good ways to do this.
The benefit of this is that the resulting output can be guaranteed to be a number - unlike using a text input, where the user could choose to enter a non-numeric value which may break later steps of your app.
Let’s take a look at how we can use these two kinds of inputs.
Tip
All of the input types given below can take a huge range of additional parameters to further refine their behaviour.
For example, many can take default values, have an optional tooltip that appears on hover, or have the way in which their values appear adjusted.
The maximum and minimum allowed values can be set, and the input can be disabled (e.g. in response to another input).
It’s highly recommended that you take a look at the documentation to understand the full range of options available.
14.1.1 Numeric Input
import streamlit as st
st.subheader("Numeric Input")
chosen_number = st.number_input(
"Pick a Number"
)
st.write(f"The number you have chosen is {chosen_number}")
chosen_number_multiplied_by_5 = chosen_number * 5
st.write(f"Your number multiplied by 5 is {chosen_number_multiplied_by_5}")
st.write(f"Your number plus 7 is {chosen_number + 7}")14.1.2 Numeric Slider
st.subheader("Numeric Slider")
chosen_number_slider = st.slider(
"Pick a Number on the slider",
min_value=0,
max_value=250,
value=50
)
st.write(f"The number you have chosen is {chosen_number_slider}")
chosen_number_slider_multiplied_by_8 = chosen_number * 8
st.write(f"Your number multiplied by 8 is {chosen_number_slider_multiplied_by_8}")
st.write(f"Your number plus 3 is {chosen_number_slider + 3}")14.1.3 Interactive Example
14.2 Other numeric, date and time inputs
Let’s have a very quick look at some of the other inputs available to us within Streamlit.
The desired type of the output will be inferred from the default value you pass into the slider.
Tip
All of the input types given below can take a huge range of additional parameters to further refine their behaviour.
For example, many can take default values, have an optional tooltip that appears on hover, or have the way in which their values appear adjusted.
The maximum and minimum allowed values for numeric, date and time sliders can be set, and the input can be disabled (e.g. in response to another input).
It’s highly recommended that you take a look at the documentation to understand the full range of options available.
14.2.1 Range Slider
lower_value, upper_value = st.slider(
"Pick a lower and upper limit",
min_value=0,
max_value=100,
value=(35, 80)
)14.2.2 Time Slider
chosen_time = st.slider(
"Select a time:",
time(11, 30)
)14.2.3 Date Slider
selected_date = st.slider(
"Select a date",
value=datetime(2022, 1, 1),
format="DD/MM/YYYY",
)14.2.4 Date Range Slider
start_date, end_date = st.slider(
"Select a date",
value=(datetime(2022, 1, 1), datetime(2023, 6, 1)),
format="DD/MM/YYYY"
)14.2.5 Time Range Slider
start_time, end_time = st.slider(
"Select a time:",
value=(time(11, 30), time(12, 45))
)14.2.6 Datetime Slider
chosen_datetime = st.slider(
"Select a date and time",
value=datetime(2022, 1, 1, 12, 0),
format="DD/MM/YYYY @ hh:mm",
)14.2.7 Date Calendar Picker
selected_date = st.date_input(
"Choose a date on the calendar picker"
)14.2.8 Time Calendar Picker
selected_time = st.time_input(
"Select a time"
)14.2.9 Interactive Examples
14.3 Text Inputs
Tip
All of the input types given below can take a huge range of additional parameters to further refine their behaviour.
For example, many can take default values, have an optional tooltip that appears on hover, have a placeholder appear to further guide the user’s input, or have a maximum length set.
It’s highly recommended that you take a look at the documentation to understand the full range of options available.
14.3.1 Long text
longer_text_input = st.text_area(
"Use this input to enter a larger piece of text"
)14.3.2 Short text
shorter_text_input = st.text_input(
"We saw this before - this is an input for a short bit of text"
)14.3.3 Interactive Examples
14.4 Selection inputs
Selection inputs are a very useful class of inputs. They allow you to give users a distinct number of options to choose from.
Tip
All of the input types given below can take a huge range of additional parameters to further refine their behaviour.
For example, you can adjust which default value is selected, have an optional tooltip that appears on hover, or change the number of allowed options in some cases.
It’s highly recommended that you take a look at the documentation to understand the full range of options available.
14.4.1 Radio
radio_colour_select = st.radio(
"Which of these colours is your favourite?",
options=["Green", "Blue", "Red", "Yellow", "Purple"]
)14.4.2 Selectbox
selectbox_colour_select = st.selectbox(
"Which of these colours is your favourite?",
options=["Green", "Blue", "Red", "Yellow", "Purple"]
)14.4.3 Multiselect
multiselect_colour_select = st.multiselect(
"Which of these colours are your favourite? You can pick more than one!",
options=["Green", "Blue", "Red", "Yellow", "Purple"]
)14.4.4 Select Slider
slider_colour_select = st.select_slider(
"Which of these colours is your favourite?",
options=["Green", "Blue", "Red", "Yellow", "Purple"]
)14.4.5 Interactive Examples
14.5 Other useful inputs - Boolean (True/False) Flags
The final inputs we’ll take a quick look at are checkbox and toggle inputs.
These are useful as they return boolean values - True or False.
Tip
While the input types below don’t have quite as many additional parameters as some of the others, it’s highly recommended that you take a look at the documentation to understand the full range of options available.
14.5.1 Checkbox
checkbox_value = st.checkbox("Tick or untick me!")14.5.2 Toggle
toggle_value = st.toggle("Tick or untick me!")14.5.3 Interactive Examples
14.6 Additional Input Types Not Covered Here
You can always refer to the excellent Streamlit documentation to see what other input widgets are available.
New official ones are sometimes added, and there are additional ones made by the community that become available over time.
14.7 Next steps with inputs
In the rest of this section, we’ll look at some of the parameters for inputs that will allow you to refine what your users will be allowed to enter, improving the usability of your app (and reducing the number of edge cases you need to account for in your programming!).