Form Components
Form components are interactive elements that collect user input and data. Use them to create forms, surveys, and data entry interfaces.
Available Form Components
Input
Single-line text input fields for names, emails, and other text data.
- • Text, email, password types
- • Placeholder text
- • Validation rules
- • Required field support
Button
Clickable buttons for actions, form submission, and navigation.
- • Primary, secondary variants
- • Different sizes
- • Icon support
- • Click event handlers
Checkbox
Boolean selection controls for yes/no choices and multiple selections.
- • Checked/unchecked states
- • Custom labels
- • Indeterminate state
- • Group validation
Radio
Single-choice selection from multiple options.
- • Single selection only
- • Grouped options
- • Custom labels
- • Required selection
Calendar
Date and time picker for scheduling and date selection.
- • Date selection
- • Time picker
- • Date range selection
- • Custom date formats
Form Component Properties
Common Properties
Content Properties
- • Label text
- • Placeholder text
- • Help text
- • Button text
Validation Properties
- • Required field
- • Minimum/maximum length
- • Pattern validation
- • Custom validation
Styling Properties
Appearance
- • Component variants
- • Size options
- • Color schemes
- • Border styles
State
- • Disabled state
- • Loading state
- • Error state
- • Success state
Form Examples
Contact Form
A simple contact form with name, email, and message fields.
Input field for name (required)
Input field for email (required, email validation)
Textarea for message (required)
Button to submit form
Survey Form
A survey form with multiple choice and rating questions.
Radio buttons for single choice questions
Checkboxes for multiple choice questions
Input fields for open-ended questions
Button to submit survey
Form Validation
Built-in Validation
- • Required field validation
- • Email format validation
- • Minimum/maximum length validation
- • Pattern matching validation
- • Number range validation
Custom Validation
You can add custom validation rules using JavaScript expressions:
javascript
// Example: Custom email validation
function validateEmail(email) {
return email.includes('@') && email.includes('.');
}Form Submission
Submission Methods
Database Storage
- • Save to SQLite database
- • Create new records
- • Update existing records
- • Form data validation
API Integration
- • Send to REST API
- • Custom endpoints
- • Authentication headers
- • Response handling
Form Workflows
Use workflows to handle form submissions. You can send emails, update databases, trigger notifications, and more when forms are submitted.
Best Practices
Form Design
Keep forms simple and focused. Group related fields together and use clear, descriptive labels for better user experience.
Validation
Provide immediate feedback for validation errors. Use clear error messages that help users understand what needs to be corrected.
Accessibility
Ensure all form components are accessible. Use proper labels, provide keyboard navigation, and include screen reader support.