Up next in 10
Widgets are fundamental components of user interfaces, and in Streamlit they allow you to create interactivity directly in your applications. With just a few lines of code, you can add buttons, checkboxes, selectors, and more.
Streamlit with Python: How to Create Buttons and Capture Input in Streamlit
Article:
💖 Donate and help us create more amazing content!
🙌 Every contribution makes a difference!
☕ Buy me a coffee: https://buymeacoffee.com/usandopython
💖Support this channel
https://www.youtube.com/channel/UCpL2Gru508Z39oPqu1FIg4Q/join
⚡️ Connect with me on:
Instagram: https://www.instagram.com/pybeginners/
Twitter: https://x.com/joaofuti_
LinkedIn Newsletter: https://www.linkedin.com/newsletters/pybeginners-7267881715929415681/
Website: https://www.usandopy.com/en
Thread: https://www.threads.net/@pybeginners
Show More Show Less View Video Transcript
0:00
hello guys welcome back to the channel
0:01
john here okay last video we learned how
0:03
we can work with media in swim okay we
0:05
learned how we can work with image audio
0:08
and video so in this video we are going
0:11
to learn how we can work with input with
0:14
get in streaml so for that let me delete
0:17
those guys because we don't need them
0:20
and uh we will start learning okay with
0:24
the fundamentals
0:25
component to create a user interface in
0:29
streamllet okay so extremely it offers a
0:31
lot of ways okay a lot of wages that you
0:34
can work with in order to create the
0:36
those things so the first one that you
0:39
are going to learn okay will be uh the
0:43
main input widget gets okay so the main
0:45
input widget gets okay I'm going to
0:46
start with the check box okay so in
0:50
order for you to create a checkbox in
0:52
streaml okay checkbox it display
0:54
checkbox okay that returns a boolean
0:55
value which will be either true okay if
0:58
the box is checked or either first if it
1:01
is not checked okay so in order to work
1:04
with is something like this okay we need
1:05
to do something like this see First I'm
1:08
going to create
1:09
uh any variable called agree so this
1:13
agree it will be equal st dot checkbox
1:16
checkbox
1:19
checkbox and check box so this is how
1:21
you can create a checkbox in streamllet
1:23
okay which is this guy st dot checkbox
1:26
okay here inside we need to give any
1:28
message something like this okay if I
1:30
save this for if I don't give any
1:32
message let me save this and if I come
1:34
here if I refresh the page as you can
1:37
see it will be just something like this
1:39
okay like it's not going to show
1:41
anything so let me remove this this
1:43
title which is not good type I save now
1:47
let me come here if I display okay I
1:49
just need to see this checkbox okay good
1:52
so uh so in order to create a better
1:55
checkboxes is always good for you to
1:57
give something here okay so let's just
1:59
say I
2:02
agree to the terms i agree to the terms
2:05
okay it's like a checkbox for you to if
2:07
you agree with the term or not save then
2:09
if I come here and if I refresh this guy
2:12
as you can see okay this is like a
2:14
checkbox for you to agree with the terms
2:15
or not okay so perfect so in order to
2:18
get the value that this checkbox return
2:21
we need to do something like this so as
2:23
we say okay checkboxes return uh two
2:25
values either true or false a boolean
2:28
value okay so in order to get those
2:29
value we need to do something like this
2:31
if agree okay the agree is the function
2:34
which is getting the check box okay if
2:36
agree what we can do dot dot let's say
2:39
something like this okay sd dot write
2:43
let's write that in the in the app
2:46
itself write what
2:49
thanks
2:50
thank
2:52
you for agreeing thank you for agreeing
2:58
agreeing this way okay thank you for
3:00
agreeing make this and save okay now
3:02
let's come here if I refresh this as you
3:05
can okay i agree the terms yes if I
3:07
agree boom it will write it okay thank
3:09
you for agreeing but if I remove this
3:12
boom it disappear okay like when you
3:14
click in the check box it immediately
3:16
return one uh event okay for example if
3:19
it is yes or no something like this easy
3:22
right so apart of the checkbox bumm okay
3:25
we can also create a bum in streaml so
3:28
in order to create a bum in streaml is
3:31
something like this okay we can call st
3:33
dot bm this way s do bumm open and close
3:38
safe okay so this one display a bum that
3:41
can be used to trigger actions in your
3:44
app okay for example if I just keep it
3:46
like this save and if I come here if I
3:49
refresh this boom as you can see it is
3:52
going to give error okay so when you
3:54
create a button in stream okay you need
3:56
to give a label okay you need to write
3:58
something that this does for you i need
4:02
to give a test for let me see click here
4:05
okay so let's create a click here save
4:08
okay now if I if I come here if I
4:11
refresh this now as you can see this is
4:13
the name of the button okay click here
4:14
if I click nothing's going to happen
4:16
okay so in order to get the actions of
4:19
this button we need to do something like
4:20
this okay it's almost like the check
4:23
button also oh don't check button check
4:25
box okay so you need to if Okay so let
4:29
me give let me put this inside of uh any
4:34
variable so that I can manage that
4:35
variable i can manipulate that variable
4:36
okay let me say uh I can give something
4:39
like this okay okay b no problem okay
4:43
for example if B okay if
4:47
B dot Okay what's going to do let's say
4:51
SD dot
4:54
write bulm let's write something okay
4:58
bon press it okay bon press it bon press
5:03
it okay save now if I save if I come
5:06
here back and if I refresh this guy boom
5:09
as you can see okay if I click this
5:11
agree terms boom it's going this okay
5:13
that's disagree if I click on this guy
5:15
as I can say bum press okay if I click
5:17
again guys bum presser boot press boot
5:19
press something like this okay this is
5:20
how you can create a bum this is how so
5:22
you can manipulate a bum in streaml
5:26
apart of this bottom okay we can create
5:28
also a ready bm so in order to create a
5:30
ready bm so in order to create a radio
5:32
button in stream we need to do something
5:34
like this okay we know that the radio
5:36
button usually is for choice okay you
5:38
need to make some choice when you are
5:40
using radio button so in order to do
5:42
that let's in stream it is something
5:45
like this okay let me create a variable
5:46
called choice so this variable can be
5:48
any name okay I'm just giving choice
5:50
because it make more sense to call it as
5:51
a choice so let's say st dot radio sd
5:55
dot radio open and close what I'm going
5:57
to do I'm going to do something like
5:58
this okay
5:59
choose a choice choose a
6:03
choice choice doesn't make sense okay
6:05
choose a course okay because it's a
6:07
course okay choose a course dot okay dot
6:11
okay now you need to come meet okay give
6:14
a comma and then here you you need to
6:16
give a list of choice
6:19
that a user can choose okay then let's
6:23
say
6:25
Python okay comma okay then after Python
6:29
we can say something okay data science
6:31
data science
6:34
uh comma and we can also web development
6:39
web development web
6:42
development and let's say also for
6:44
example C programming
6:47
C
6:49
programing C program okay save now I
6:53
just saved this okay let me give enter
6:55
now if I come M okay if I refresh this
6:59
as you can see I have a lot of choices
7:02
okay for the uh anything that you're
7:04
going to give to that list okay it will
7:05
appear as a choice for them we have
7:07
Python we have data science web
7:09
development C program okay so this is
7:11
how you can create a ready button in
7:14
Python streamly in order to manipulate
7:17
this okay we need to do something like
7:19
this we can just come here for example
7:21
say st dot write open and close what I'm
7:26
going to do For example let's say let's
7:27
use F string itself and do something
7:29
like this okay you choose okay you
7:32
choose in order for us to see the uh
7:35
choice option we need to do something
7:37
let me see you choose dots give a little
7:40
space here okay let's come in front no
7:43
here inside itself okay and let me open
7:45
this and what I'm going to give I'm
7:47
going to give choose oh choice okay
7:51
because I'm going to use this choice
7:52
okay this choice it will every time when
7:53
I click in that radio button it's going
7:56
to give me return me okay the option
7:58
that that I will click on okay save then
8:01
if I come here now for if I refresh the
8:04
first thing that's going to show it's
8:05
Python it's say you choose Python okay
8:07
now if I choose data science is say you
8:09
choose data science like this okay is
8:12
whatever I click is going to display
8:14
here okay you choose Python you choose
8:16
data science you choose web development
8:18
and you choose C programming this is how
8:20
you can create a red bul in extremely uh
8:23
part of uh radio bottom okay you can
8:26
create also a selected bum okay a
8:29
selected box okay in order to create a
8:31
selected box it's kind it's like a radio
8:34
bum itself okay so that's why I'm just
8:36
going to copy this guy okay I'm going to
8:39
copy this guy and come here down and
8:41
boom do like this okay so apart instead
8:43
of this I'm going to give like a course
8:47
okay now I'm going to give a city okay
8:49
I'm going to call this city this
8:51
variable city okay for choice I'm going
8:54
to change this into city okay and now
8:58
here instead of say you choose let's say
8:59
selected uh
9:01
selected city select a city will be okay
9:06
now choose a city something like this
9:07
okay choose a
9:09
city choose a city choose a city so now
9:13
let's give some name of some city okay
9:15
let's give it a blue okay is a capital
9:17
of my country angola and let's say
9:21
Bangalore
9:23
and which city can you Okay
9:26
new York new York new York you know New
9:32
York uh any city more okay whatever is
9:35
coming okay can my head can just Berlin
9:37
okay perfect boom i said okay now if I
9:40
come here okay this is how you can
9:41
create oh now I need to change this name
9:43
instead of radio I'm going to give the
9:46
selected uh selected now select box
9:49
select box okay save now if I come here
9:52
if I refresh this guy boom as you can
9:55
see I have a select box here now if I
9:57
click here I can see Lwanda Bangalore
10:00
New York and Berlin for them right now
10:02
it's giving me Lwanda okay so I can just
10:05
come here and choose for example
10:06
Bangalore boom it's going to choose
10:08
Bangalore if I come here boom new work
10:11
okay but as you see okay for the when I
10:13
refresh the app it always give the first
10:16
C as the selected ch uh choice okay so
10:20
for to avoid that okay we just can come
10:22
here inside of our list okay let's give
10:25
uh for the comma and let's give any
10:27
empty string okay so this way when I
10:29
come here if I refresh it's not going it
10:33
will not show anything okay even here in
10:35
this course for example we can do the
10:37
same thing here okay we just need to
10:39
come here okay give a comma and give a
10:42
any empty list okay so that this way you
10:44
cannot select anything so then we can
10:46
create some kind of if else conditions
10:48
and boom you can do you cannot show any
10:52
anything okay so this is how you can
10:55
create a selected box for let me see
10:56
Bangalore boom if I come the first one
10:59
nothing and New York boom something like
11:01
this okay this is cool so apart of this
11:04
okay let's imagine that you are creating
11:06
an app that you need to select like your
11:08
favorite cities okay so for that you can
11:10
say something like okay uh something
11:12
like this okay let's say
11:14
choose your
11:18
uh oh choose your Uh-huh
11:22
choose your
11:25
favorite cities okay choose your
11:28
favorite cities okay so that we can
11:30
choose more than one seat okay choose
11:32
your favorite cities okay so instead of
11:35
giving select box okay we can come here
11:38
and we can use this guy SD dot multi
11:42
this way okay multi select multi select
11:46
this guy okay so if I save this and if I
11:49
come here if I refresh boom as you can
11:52
see if I come here if I click Lwanda
11:55
Bangalore Berlin New York okay it's
11:58
going to give like this but when I click
12:00
it as you can see is return me as a list
12:03
which is a kind of mistake it's not a
12:05
good thing okay but I can remove my
12:06
angular okay it's give it like this okay
12:09
so we don't want it to show as a list
12:10
okay so in order to show only the names
12:14
that we select instead of showing like a
12:16
list we can do something like this okay
12:18
so here okay we can see ST okay f string
12:21
okay let's say uh you selected selected
12:26
cities are selected cities are okay dot
12:30
dot and we can do something like this
12:33
see here inside okay we can give like
12:36
any empty string let's use comma and oh
12:39
sorry let's give like a comma here okay
12:43
I give this a little space and instead
12:45
of giving city okay let's remove this
12:49
and let's say dot dot what dot join okay
12:53
open and close come here let's put this
12:55
city inside okay open and close what
12:58
city now if I come here okay if I
13:02
refresh this guy boom perfect let me
13:04
choose Lwanda choose Lwanda perfect and
13:07
New York as you can see now Lwanda New
13:10
York comma and so on okay this is how
13:13
you can manipulate that way that uh list
13:18
okay that you will select so apart of
13:20
multi selected okay we can also add a
13:22
sliders inside of uh streaml which is
13:25
very easy to be honest okay for example
13:27
let's say something like H will be equal
13:30
okay SD dot
13:32
slider see it's very easy it's really
13:35
easy to work with uh uh what's the name
13:38
of this stream okay so we can say okay
13:40
what is
13:42
your age what is your age okay
13:45
interrogation then after this you need
13:47
to come here okay give a comma then give
13:50
some option here for them zero comma
13:53
100 comma and 25 okay so after this if I
13:58
come here save okay you we can say
14:01
something like SD dot write what it's
14:05
going to write it's going to write
14:06
something like this okay
14:08
see f let's use f string let's say age
14:12
dot and we can see the open and close
14:15
let's give that age variable and uh
14:18
let's say years here okay years okay now
14:24
if I come here if I refresh
14:27
uh age 25 okay if I if I slide here okay
14:33
if I keep
14:34
sliding 28 30 31 blah blah blah blah
14:38
blah up to 100 only okay so the the
14:42
limit is like it start from zero up to
14:44
100 so that's why you have here okay
14:46
zero up to 100 so this 25 is like the
14:50
current age of this person okay so we
14:52
can start we can choose where you want
14:54
it to start okay for example if I choose
14:56
20 safe and if I come back here and if I
14:59
run this guy refresh as you can see it
15:02
start on 20 years 20 years okay if I go
15:06
back 9 years and just keep growing and
15:08
boom something like this okay so this is
15:10
how you can add a slider in your
15:12
streamllet application okay so guys
15:14
we'll stay here in the next video we are
15:16
going to continue about how you can work
15:19
with the input okay but we are going to
15:21
learn about the input string and input
15:25
test in streaml okay so we are going to
15:27
learn how we can work with those test
15:29
things okay in streaml so my name is J
15:32
if you like this video give give a like
15:33
and subscribe to the channel bye-bye see
15:35
you in the next video