Bubble's fundamental components — input fields, buttons, dropdowns, checkboxes, and date pickers — are the building blocks of every app. This tutorial covers configuring each element type, linking inputs to data and workflows, applying validation, and using conditional formatting to create interactive, data-driven forms.
Overview: Using Fundamental Components in Bubble
This tutorial is a comprehensive guide to Bubble's core UI elements. You will learn to configure each input type, connect them to workflows, validate user input, and style them consistently.
Prerequisites
- A Bubble account with a new or existing app
- Basic understanding of the Design tab and Element Palette
- Familiarity with the Property Editor
- A Data Type to connect form inputs to
Step-by-step guide
Configure text and number input elements
Configure text and number input elements
Click the + icon in the Element Palette and search for Input. Drag it onto your page. In the Property Editor, set the Content format: Text for names, Email for email addresses, Integer for whole numbers, Decimal for prices, Password for passwords. Set Placeholder text to guide users (e.g., Enter your email). Configure Initial content for pre-filled values. For multi-line text, use the Multiline Input element instead. Set maximum character limits in the input settings.
Pro tip: Use Content format = Email to get automatic email validation — Bubble will show an error if the format is invalid.
Expected result: Properly configured input elements with correct content formats and placeholders.
Set up buttons with workflows and states
Set up buttons with workflows and states
Add a Button element from the palette. In the Property Editor, set the button text (e.g., Submit, Save, Cancel). Go to the Workflow tab and create a workflow for When Button is clicked. Add actions like Create a new thing or Make changes to a thing. Style the button in the Appearance tab: background color, border radius, padding. Add hover and pressed states using Conditional tab: When This Button is hovered → background color darker shade. Disable buttons conditionally: When form is incomplete → This element is not clickable and background = grey.
Expected result: Buttons trigger workflows and have visual feedback for hover, pressed, and disabled states.
Configure dropdowns, checkboxes, and radio buttons
Configure dropdowns, checkboxes, and radio buttons
Add a Dropdown element. Set Type of choices to Static for fixed options (enter them in Choices) or Dynamic for database-driven options (set to a Data Type and filter). For yes/no questions, use a Checkbox element. For mutually exclusive options, use a RadioButtons element (add via a plugin or simulate with a group of icons). For multi-select, use a Multiselect Dropdown plugin. Each element's value is accessible in workflows and dynamic expressions.
Expected result: Selection elements are configured with appropriate choice sources and ready for workflow use.
Link all elements to data operations
Link all elements to data operations
In your form's submit workflow, reference each input element's value. For Create a new thing: set each field to the corresponding input's value (e.g., name = Input Name's value, email = Input Email's value, category = Dropdown Category's value). After the action, add Reset relevant inputs to clear the form. For editing existing records, pre-populate inputs using Initial content set to Current Page Thing's field. Use Make changes to a thing instead of Create.
Expected result: Form inputs are connected to database operations for creating and editing records.
Apply validation and error messages
Apply validation and error messages
Add validation to your form. Create a Group element below each input for error messages (red text, hidden by default). Add Conditionals on each error group: When Input Email's value is empty AND Button has been clicked → This element is visible, text = Email is required. On the Submit button workflow, add Only when conditions to prevent submission: Only when Input Name's value is not empty AND Input Email's value is not empty AND Input Email's value :contains @. This prevents invalid data from reaching your database. For complex form building with advanced validation, RapidDev can help create polished user experiences.
Expected result: Form validation prevents incomplete or invalid submissions with clear error messages.
Complete working example
1FUNDAMENTAL COMPONENTS REFERENCE2=================================34INPUT TYPES:5 Input (Text): names, general text6 Input (Email): email with auto-validation7 Input (Integer/Decimal): numbers, prices8 Input (Password): masked password entry9 Multiline Input: long text, descriptions10 Date Picker: date and time selection11 File Uploader: file and image uploads12 SearchBox: database-connected search1314SELECTION TYPES:15 Dropdown: single select from list16 Checkbox: yes/no toggle17 Radio Buttons: mutually exclusive options18 Multiselect: multiple selections (plugin)1920BUTTON STATES:21 Default → hover → pressed → disabled22 Use Conditionals for each state2324VALIDATION PATTERN:25 1. Add error message Groups (hidden by default)26 2. Show via Conditional when input is invalid27 3. Add Only when conditions on submit workflow28 4. Reset inputs after successful submission2930DATA LINKING:31 Create: field = Input's value32 Edit: Initial content = record's field33 Save: Make changes to thing → field = Input's valueCommon mistakes when focusing on fundamental components like input fields, buttons, etc., in Bubb
Why it's a problem: Not setting the correct Content format on inputs
How to avoid: Set Content format to Email for emails, Integer/Decimal for numbers, and Password for passwords.
Why it's a problem: Forgetting to add Reset relevant inputs after form submission
How to avoid: Add the Reset relevant inputs action as the last step in your submit workflow.
Why it's a problem: Not adding validation before database operations
How to avoid: Add Only when conditions on the submit workflow checking that all required fields have valid values.
Best practices
- Set appropriate Content format on every input element
- Add placeholder text to guide users on expected input
- Apply validation with clear error messages before submission
- Use Conditional formatting for button hover and disabled states
- Pre-populate inputs when editing existing records
- Reset inputs after successful submission
- Use Dropdowns for predefined choices to ensure data consistency
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am new to Bubble.io and need to understand how to use input fields, buttons, dropdowns, and checkboxes. Can you explain how to configure each, connect them to data, and add validation?
Help me understand Bubble's basic components. Show me how to configure text inputs, email inputs, dropdowns, checkboxes, and buttons. Connect them to a form that creates a record in my database with validation.
Frequently asked questions
What is the difference between Input and Multiline Input?
Input is a single-line text field for short values like names and emails. Multiline Input allows multiple lines of text and is used for descriptions, comments, and longer content.
How do I create a required field?
Bubble does not have a built-in required attribute. Instead, add an Only when condition on the submit workflow checking that the input is not empty, and show an error message via Conditional visibility.
Can I style inputs differently based on their state?
Yes. Use the Conditional tab to change border color, background, or text when the input is focused, has content, or has an error.
How do I create a phone number input?
Use a regular Input with Content format set to Text. Add a regex-based validation on submission to ensure the value matches a phone number pattern.
Can I make a dropdown searchable?
The standard Dropdown is not searchable. Use the SearchBox element for searchable dropdowns — it provides autocomplete search against a Data Type or static list.
Can RapidDev help with complex form building?
Yes. RapidDev can build advanced forms with multi-step wizards, conditional fields, file uploads, real-time validation, and integration with external APIs.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation