# How to focus on fundamental components like input fields, buttons, etc., in Bubb

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
FUNDAMENTAL COMPONENTS REFERENCE
=================================

INPUT TYPES:
  Input (Text): names, general text
  Input (Email): email with auto-validation
  Input (Integer/Decimal): numbers, prices
  Input (Password): masked password entry
  Multiline Input: long text, descriptions
  Date Picker: date and time selection
  File Uploader: file and image uploads
  SearchBox: database-connected search

SELECTION TYPES:
  Dropdown: single select from list
  Checkbox: yes/no toggle
  Radio Buttons: mutually exclusive options
  Multiselect: multiple selections (plugin)

BUTTON STATES:
  Default → hover → pressed → disabled
  Use Conditionals for each state

VALIDATION PATTERN:
  1. Add error message Groups (hidden by default)
  2. Show via Conditional when input is invalid
  3. Add Only when conditions on submit workflow
  4. Reset inputs after successful submission

DATA LINKING:
  Create: field = Input's value
  Edit: Initial content = record's field
  Save: Make changes to thing → field = Input's value
```

## Common mistakes

- **Not setting the correct Content format on inputs** — Using Text format for emails means no automatic validation. Using Text for numbers allows non-numeric entry. Fix: Set Content format to Email for emails, Integer/Decimal for numbers, and Password for passwords.
- **Forgetting to add Reset relevant inputs after form submission** — Users see their previously entered data after submitting, which may confuse them or lead to duplicate submissions Fix: Add the Reset relevant inputs action as the last step in your submit workflow.
- **Not adding validation before database operations** — Without validation, empty or invalid data gets saved to the database, causing issues throughout the app Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/focus-fundamental-components-input-fields-buttons-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/focus-fundamental-components-input-fields-buttons-bubble