Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • How option sets are structured
  • Creating option sets
  • Adding options
  • Editing attributes
  • Linking option sets
  • Using option sets
  • As a data source on an element
  • In an expression
  • Option set FAQ
  • Other ways to learn

Was this helpful?

  1. User manual
  2. Data
  3. Static data

Option sets

This section covers option sets, used to store a static list of options in a database-like structure

Last updated 1 year ago

Was this helpful?

Option sets let you set up different types of static options in a database-like structure, but without using the database. This is useful to store information like days of the week, marital status, colors, states, countries and other data that you want to load quickly and that's rarely updated.

Option sets become a meaning that they are downloaded as part of the JavaScript file that makes up your application. As such, they don't require a database lookup and are on the user's device until you deploy a new version of your app, making them fast-loading and lightweight.

This also means that option sets cannot be added, edited or deleted by your users and require you to re-deploy your application before options become available in Live.

Option sets, unlike the database, are not encrypted and become a part of your application's source code. Option sets should never contain any sensitive information.

How option sets are structured

An option set, as the name suggest, is a set containing options. To each set you can add a list of attributes that are similar to the fields on a data type. Attributes can be set to be one of the following types:

  • text

  • number

  • date

  • date interval

  • yes / no

  • file

  • image

  • geographic address

  • [other Option sets]

To summarize, each option set consists of a collection of options that share the same attributes of one of the types above.

Just like data types, option sets can be linked. For example, you could set up two option sets called State and City and create an attribute on the City that links to the State option set.

In the example above, you see the option sets on the left-hand side (1) and the attributes on that option set on the right-hand side (2). The Display attribute is a built-in text field that identifies each option in the set.

Bubble doesn't require the value in the Display attribute to be unique, but it can still be a good idea to make sure that they are in case you need to filter the options by their Display value later. If you have duplicate values you may not get the results you want.

Creating option sets

To create a new option set, first access the option set tab by going to Data - Option sets. The list on the left-hand side will be empty and showing only the New Option set box. To create a new set, provide a name and click Create.

After creating the new option set (such as State), you can set up attributes on that set: in many cases you can use the built-in Display attribute to store the main identifier of each option. In this case this would be the name of the state, such as Massachusetts. You can create as many attributes on it as you need. For example, you could add a second text attribute containing the state code (MA).

Adding options

After an option set has been created and you have added the attributes you need to it, you can start adding the options. In an option set like City, the options would be the different cities you want to list, such as Boston and Washington.

To create a new option, pick the option set you want to add it to, and type in a name in the New option field, then click Create. The name you provide will be stored in the Display field on that option.

Editing attributes

Linking option sets

You can link option sets just like data types, by setting up the attribute on one or both of them to reflect the other. If we create an option set called City, we can link that city to the State option set:

In the example above, we are linking the two by:

  1. Clicking the Create attribute button on the City option set

  2. Picking the State option set from the list of available types

Just like with data types, the attribute can also be set to be a list, but this won't be necessary in the example with State and City.

When the two are linked you can use it to filter a list of option sets (such as showing all Cities in the State of Massachusetts) or to display information in a page element, such as a text element showing Boston - Massachusetts.

Using option sets

Unlike Data types, you don't search for option sets: they are all loaded on page load and you can reference them in elements and workflows as needed.

As a data source on an element

In the example below, we are using option sets to display a list of Cities in a .

  1. We've set up a dropdown with the Pick a city

  2. In the choices style we pick Dynamic choices, which lets you define the

  3. In Type of choices we select the option set Cities

  4. In the Choices source we define what list we want to display. Note the difference between data types and option sets: we don't search for the options, we simply pick the All Cities to instruct Bubble to load all of them. If you want to filter the results, you can apply the :filtered operator after the data source, such as All Cities:filtered. In that filter you place constraints such as filtering the Cities by their State attribute.

In an expression

You can also use an option set as a data source in an expression and then filter or manipulate the result using operators.

In the screenshot above we are setting up a conditional expression on the dropdown element. To reference an option set, you can:

  1. Select it from the list of options that appear at the top of the dropdown. Bubble knows that the Option set is City since we are referring to the value of the dropdown (which is set to be a City)

  2. You can use the Get an option data source to access all option sets and use operators to find the right value

Option set FAQ

What are the main differences between an option set and a database data type:

Option sets
Data types

... are part of your app's codebase and are cached in the user's device

... are part of your app's database and need to be fetched from Bubble's server every time

... are unencrypted and should not contain any sensitive info

... are encrypted can store private data

... are not protected by Privacy Rules

... are protected by Privacy Rules

... can link to other Option sets

... can also link to Option sets

... cannot link to a data type

... can link to another data type

... cannot be edited by your app's users

... can be edited by your app's users

... needs to be deployed for changes to be visible

... are dynamic and any changes are immediately visible

... can be referenced directly in an expression (such as referencing the Boston option without having to search for it)

... can only be referenced by way of a search or a field on another data type

To summarize, Option sets are insecure, static values that can only be changed by the app developer and data types are secure, dynamic values that can be changed by any user with access.

I have made changes to an option set. Why can't I see the changes in the live app?

If you can't see the changes you've made, please check the following:

  • Changes in option sets are visible as follows:

    • Development: after the page is refreshed

    • Live: after the app has been deployed and page has been refreshed

  • Check that the Saving indicator next to the edit menu is showing Saved to confirm that the change has been synced to the Bubble server. If not, please check your internet connection.

Does Bubble only download the option sets that are used on a page

All option sets are downloaded on all pages (or the cached file is used if the file has already been downloaded to the User's device). This means two things:

  • To avoid having to download a lot of data, you shouldn't let your collection of Option sets grow too big

  • You should never store any sensitive information in an Option set, even if it's not in use on the page, as it's still part of your app's source code file

How do I search for option sets?

You don't search for option sets in the same way as data types, since they are already downloaded the user's device and not part of the database. You can list and filter option set options or reference one option directly without having to search for it.

Other ways to learn

Core reference
Video lessons

To edit the attributes on an option set, click the Edit attributes link next to the option set in the list. This is not visible until you have created at least one option. In the example above we can assign the City we have created to a State – see on how to link the two.

In the Option caption setting we set which attribute to use as the option's caption in the dropdown. In our example we have saved the name of the City in the Display attribute. We could also extend it to show the City and State by expanding the expression: The example above would make each City be displaye with their State in the dropdown, such as Boston - Massachusetts.

You can read more about that .

(loading an option set)

How to use option sets
below
here
Option sets can be used to store static options and use them around your app. In this example we have saved a list of colors as options in a set
In the New option set field, type in a name and click Create.
To modify the attributes of an option, click the Modify attributes link in the lists of options.
Get an option