How to create a gender selection dropdown using Option Sets in Bubble.io
In this Bubble.io tutorial video we show how to use Option Sets to create a gender selector in a registration workflow as a user signs up. Option Sets are an incredibly powerful tool for storing values that you'll be referring to over and over again in your Bubble application especially if you need to present this data in different ways such as gender and gender symbols or currencies and currency symbols.
Unlock the power of option sets: Create dynamic gender dropdowns and streamline your registration workflow in Bubble!
Master data management: Learn how to efficiently group and link data across your app using option sets in Bubble.
Elevate your form design: Discover why option sets trump text fields for gender selection and boost your app's data integrity.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.