What You'll Build

Interactive forms with buttons that respond to clicks, change dynamically, and perform form actions like validation and reset.

What You'll Learn

How to add buttons with addButton()
Handling click events with onClick
Creating dynamic button labels
Disabling buttons based on form state
Showing/hiding buttons conditionally
Using form.resetForm() to reset fields
Setting field values programmatically with setValue()
Validating forms with isFormValid() and markAllAsTouched()

🔘

Interactive Forms

Buttons are the primary way users interact with your form beyond filling in fields. They trigger actions like submitting data, resetting values, or navigating between sections.

This tutorial also introduces form.state() for managing local state!

Tutorial Steps

Step 1: Basic Button with Click Handler

Add a button using addButton() with a label and onClick handler. We'll use form.state() to track clicks.

💡 Tip:

form.state(initialValue) creates a reactive state variable. Call it as a function to get the value, use .set() to replace, or .update() to transform it.

Step 2: Dynamic Button Labels

Button labels can be dynamic! Pass a function to label to change the text based on state.

💡 Tip:

Dynamic labels are great for toggle buttons like "Show More/Show Less", "Expand/Collapse", or "Start/Stop".

Step 3: Disabled State

Use isDisabled to disable buttons until certain conditions are met. Here, the "Add Shipping Address" button is disabled until the name field is filled.

💡 Tip:

Disabling buttons until prerequisites are met guides users through the form logically and prevents them from accessing sections prematurely.

Step 4: Conditional Visibility

Use isVisible to show or hide buttons based on form state. This example toggles between Simple and Advanced modes, showing additional fields and a reset button only in advanced mode.

💡 Tip:

Buttons can control form complexity. Use mode toggles to show/hide advanced options, keeping the interface clean for users who don't need them.

Step 5: Resetting the Form

Use form.resetForm() to reset all fields to their default values. This is perfect for "Reset" or "Clear" buttons.

💡 Tip:

resetForm() restores all fields to their defaultValue. If no default was set, fields become empty.

Step 6: Validating Before Actions

Use form.markAllAsTouched() and form.isFormValid() to validate before revealing new sections. Here, a summary section only appears when all required fields are valid.

💡 Tip:

markAllAsTouched() triggers validation messages on all fields. isFormValid() returns true only if all required fields are filled. Use this pattern to gate access to additional form sections.

Step 7: Template Buttons with setValue()

Use setValue() to programmatically fill fields with preset values. This example shows template buttons that instantly populate the form with different configurations.

💡 Tip:

field.setValue(value) sets a field's value programmatically. Use setValue(null) to clear a field. Note: setValue() has no effect on fields with computedValue.

API Reference

ButtonConfig

label: Button text (string or function returning string)
onClick: Callback function when button is clicked
isDisabled: Disable button conditionally (boolean or function)
isVisible: Show/hide button conditionally (boolean or function)

Form Actions

form.resetForm(): Reset all fields to their default values
form.isFormValid(): Returns true if all required fields are valid
form.markAllAsTouched(): Trigger validation display on all fields

Field Methods

field.value(): Get current field value
field.setValue(value): Set field value programmatically (no effect if field has computedValue)

Form State

form.state(initialValue): Create a reactive state variable
state(): Get current value
state.set(value): Set new value
state.update(fn): Update value with a function

Try It Yourself

Challenge 1: Create a counter with increment and decrement buttons
Challenge 2: Add a "Clear All" button that only appears when fields have values
Challenge 3: Create a button that toggles between "Edit" and "View" modes
Challenge 4: Build a form with "Previous" and "Next" buttons (hint: use state for current step)
Challenge 5: Add a "Copy to Clipboard" button that shows a success message
Challenge 6: Create a "Copy Billing to Shipping" button using setValue() to duplicate address fields

Next Steps

Great job! You've learned how to create interactive buttons and manage form actions. Ready to explore layout options?

Continue to Multi-Column Layouts

Other learning paths:

Learn computed values for automatic calculations
Explore conditional visibility for dynamic forms
Master form state management in complex scenarios