Current section: Inputs 59 exercises
solution

Select

Loading solution

Transcript

00:00 Alrighty, let's get our AI assistant working for us. Come on AI assistant. We got our div. Here's our first name No, that's that's not it at all. Thanks. Anyway, maybe if we say account type selection and this will be account type now

00:17 Sweet we've got our select. We've got our options and our closing select. Great. So let's talk about this. So here we have our select Id is account type selection and the name is account type. That's exactly what we were supposed to do for this one We have an option with a value that is empty

00:34 So that is what our please select an option is that was our extra credit here from Hannah hundred So it's an empty string and then we had each one of the options So admin is a lowercase admin teacher parent and student. So With the option

00:50 the value is what the value will be if that option is selected and then the Children of the option is what will be visible within that selection now You're a little bit limited on what you can stick in here just because the way that selects work So if you wanted to do Like a button in here. Hello

01:09 That's not going to work out very well for you. So we this is one of the reasons why You may need to reach out to Another library or something for an experience like this, although like having buttons may not make the most sense But maybe you wanted to be able to like have somebody remove this option or something like that right there

01:30 It could make sense. And so selects while a great primitive don't always Allow you to do everything that your designer wants you to do so Something to think about there, but this is how selects work rather than being an input with a type

01:47 It is a completely different element. And in fact, it's a collection of elements. It's compound elements So we put these things together this select and the option together make the entire experience So we're going to actually talk about that way into the future When we're making our own compound components, which you can look forward to

02:06 So, yeah, you make your select you have your option each option has a value and children and that's what appears Down there another thing To keep in mind is that the order does matter. So let's just shake this up a lot

02:21 So that the order matters in that the first item is going to be the default selected item. So this is now defaults to teacher and then The rest of these will be sorted in the order that these things appear so the order does matter in

02:39 This case which I think yeah, it's kind of interesting. So there you go. There's your select