What You'll Build

A simple contact form with name, email, and phone number fields. You'll learn the basics of creating text inputs and understanding different field types.

What You'll Learn

How to add textbox and email fields
Setting labels and placeholders
Making fields required
Adding helpful tooltips to fields
Basic form layout with rows

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our contact form step by step.

Step 2: Add First Text Input

First, let's add a text input for the person's name. We use addRow() to create a new row, then addTextbox() to add the field.

💡 Tip:

The isRequired: true property adds validation to make sure the field isn't empty. Try to submit the form without it and see what happens!

Step 3: Add Email Field

Now let's add an email field. Notice we use addEmail() instead of addTextbox() - this provides built-in email validation.

💡 Tip:

Email fields automatically validate the format (like requiring @ symbol).

Step 4: Add Phone Field

Finally, let's add a phone number field. This is optional (no isRequired), so users can skip it if they want.

💡 Tip:

For phone numbers, textbox works fine. You could add pattern validation for specific formats later.

Step 5: Add Helpful Tooltips

You can add tooltips to provide helpful hints to users. The tooltip property displays a small info icon next to the label - hover over it to see the message.

💡 Tip:

Tooltips can be static strings or dynamic functions! Notice how the email tooltip changes based on the name field - try entering your name and hover over the email tooltip to see it update.

Try It Yourself

Challenge 1: Add a textarea field for "Message" below the phone field
Challenge 2: Make the phone field required
Challenge 3: Try to add more than one filed into the same row. What happens?

Next Steps

Great job completing this tutorial! You've learned the basics of text input fields. Ready to explore more advanced text inputs?

Continue to Text, Email & Textarea Tutorial

Other learning paths:

Learn about different input types (numbers, dropdowns, checkboxes)
Master form layout with column widths
Add validation and conditional logic