How to create a gender selection dropdown using Option Sets in Bubble.io

Creating an Option Set for Gender Selection

So here's an example of a registration form and these fields here, it makes sense to have text. This is also a text box but set to email and this is a password set to content format password. But gender doesn't make sense to have as a text field because you can have a fairly good guess at the values that users will be adding in there and you might then want to do something with those values later on. So this is a really good example of where you would use an option set instead of a text field and option sets are accessible through data and option sets here and so we can create an option set called gender and option sets are a way of grouping together like a subset of fields and so the default one it comes with is the display field which you could also call the label field and so here the different options within gender is going to be male, female and other.

Benefits of Using Option Sets

Option sets are a really good way of linking data across your app. Perhaps think of it like a drop down of where you don't want to have to be manually entering in the same values each time when you refer to it so you would use an option set because you know that the values each time in your app are going to be one of these. So to turn it into a drop down here we'll get rid of the text field and enter in a drop down field and to recall that data from our option sets we choose a dynamic choice and then we'll find gender down here.

Implementing the Gender Option Set

So at the list here at the top you have the data types, your main database types and then below that you have your option sets followed by the more abstract values. Here's gender and then all gender and then the current option display is what the user will see when they click on the option set. So if we go ahead and click preview you can see here that you get a choice of the option sets.

Linking the Form to a Registration Workflow

So let's quickly link up this form to a registration workflow. So account, sign up user, email address, password, we've not got a name field. So the name field is of course going to be text because it could contain any range of values but we know it's going to be a text value. But then gender, you don't want to use text because although you could use that to input the display or the label so it would put male, female or other in there, you can't then refer back to your option sets and the data you've got paired there. So we'll call it gender but then in order to store an option set value to get the real power of option sets you need to select the option set type. And so that means that when we click next it will store all of these values including the option set that is selected there.

Enhancing Option Sets with Additional Attributes

To further demonstrate the power of option sets let's go back to our gender option set and we have our display, our label but let's add another attribute and this is going to be symbol and symbols are displayed as text. And so this allows me to go into male and to copy the Unicode symbol for male and to go into female and copy the Unicode symbol for female. And then as a little bit of a hint of what you can do with this in this box here we're going to display the label followed by current option set symbol and then if we look on the front end you'll see that it displays both values of the option set.

Flexibility and Power of Option Sets

And so that would then mean if later on in the app I wanted to only show the symbol I can just call on the option set symbol and I don't have to show male and symbol. It also means that if for whatever reason perhaps not really relevant to gender but I wanted to go and then change these values to say for some reason I wanted to do animals instead I just changed the value in my option set and wherever in my app that option set is referred to whether it's in a form or whether it is attached to data it gets updated and that is just one reason why option sets are really powerful.