Skip to main content

Forms

Package Reference: This documentation covers the Forms system built on top of the @mapples/form package. For complete API documentation, see the @mapples/form package reference.

Forms is a powerful and flexible form management system designed specifically for React Native applications. It provides a comprehensive solution for form state management, validation, field handling, and user input processing that works seamlessly with the Mapples ecosystem.

What is Forms?​

Forms is built on top of the @mapples/form package and provides a higher-level abstraction for creating robust, user-friendly forms with minimal boilerplate code.

📝 Key Concept

Forms operates through a context-based system where form configurations are provided at the application level and consumed throughout your component tree. This approach ensures consistency, flexibility, and performance across your entire application.

It offers:

  • Form State Management: Automatic form state handling with validation and error management
  • Field Validation: Built-in validation with custom validators and error messages
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Performance: Optimized with memoization and efficient form processing
  • Accessibility: Built-in accessibility features for screen readers and assistive technologies
  • Integration: Seamless integration with Mapples Creator and Styler
  • Cross-Platform: Full support for both React and React Native applications

Key Features​

🎯 Intelligent Form Management

Forms automatically handles form state, validation, and submission with minimal configuration. Define your form schema once, and Forms handles the rest.

🔍 Advanced Validation

Create complex validation rules with custom validators, async validation, and real-time error feedback.

⚡ Performance Optimized

Built-in memoization and efficient form processing ensure your forms stay fast, even with complex validation requirements.

🔧 Developer Friendly

Full TypeScript support, comprehensive documentation, and intuitive APIs make form development a breeze.

How Forms Works​

Forms operates through a context-based system where form configurations are provided at the application level and consumed throughout your component tree.

This approach ensures:

  1. Consistency: All form fields share the same validation rules and error handling
  2. Flexibility: Easy to override and customize form behavior at any level
  3. Performance: Forms are processed once and reused efficiently
  4. Maintainability: Centralized form logic that's easy to update and modify

Platform Support​

🌐 Cross-Platform Support

Forms provides full support for both React and React Native applications with platform-specific optimizations:

React Support​

Forms works seamlessly with React web applications, providing:

  • Web Form Components: Optimized form components for web browsers
  • HTML Form Integration: Direct integration with HTML form elements
  • Web Accessibility: Full ARIA support and keyboard navigation
  • Browser Compatibility: Support for all modern browsers
  • Performance: Optimized for web rendering and user interactions

React Native Support​

Forms is specifically optimized for React Native mobile applications:

  • Native Components: Integration with React Native TextInput, Switch, and other native components
  • Mobile UX: Touch-optimized form interactions and validation
  • Platform-Specific: iOS and Android specific optimizations
  • Performance: Optimized for mobile rendering and memory usage
  • Accessibility: Full support for mobile accessibility features
🔧 Platform Detection

Forms automatically detects the platform and applies appropriate optimizations and component behaviors.

Integration with Mapples Creator​

Forms is deeply integrated with Mapples Creator, providing a visual interface for form configuration and management.

  • Form Builder: Create forms through the visual editor
  • Field Configuration: Set up form fields with validation rules
  • Schema Management: Define form schemas and data structures
  • Validation Setup: Configure validation rules and error messages

Getting Started​

🚀 Quick Start

To begin using Forms in your Mapples project:

  1. Set up your form schema in Mapples Creator
  2. Configure your form fields through the visual interface
  3. Start building forms with automatic validation support
  4. Customize as needed using the powerful API

What's Next?​

📦 Installation

Installation and configuration guide for using Forms in your projects.

Get Started →

🔧 Hooks

Learn about all available hooks and how to use them effectively.

Hooks Guide →

📚 API Reference

Complete technical documentation for all Forms functions and components.

Full API →