#Quick Start

#Introduction

This chapter will guide you through the basic features of Schema FormX in 5 minutes. We will demonstrate the simplest usage and help you complete the basic configuration, so you can quickly understand the core capabilities of Schema FormX.

Schema FormX is a declarative form solution that quickly builds complex form interfaces through configuration-driven approach.

#Installation

Install Schema FormX into your project:

npm install @schema-formx/react

yarn add @schema-formx/react

pnpm add @schema-formx/react

bun add @schema-formx/react

deno add npm:@schema-formx/react

#Example

The following is a user registration form example comprehensively demonstrating the core features of Schema FormX:

• Grouped Form: Use GroupSchema to organize fields into "Basic Info", "Contact", and "Account Settings" groups, with a custom FormGroup component rendering group titles
• Multiple Field Types: string (name, email), number (age), boolean (agreement checkbox)
• Custom Components: Use the component property to specify Select, Checkbox, etc.
• Dependency Linkage: Selecting a country automatically updates city options (deps + onDepsChange)
• Dynamic Visibility: Selecting "Enterprise" shows the company name field, "Personal" hides it (hidden)
• Validation: required validation and custom validator functions
• Instance Methods: Call validate() and reset() via ref
• Controlled Mode: External control of form data via data + onChange
• Real-time Preview: Live JSON display of current form data at the bottom

#Core Concepts: Controlled vs Uncontrolled

Schema FormX supports two data management modes:

// Uncontrolled: just set defaultData
<Form schema={schema} defaultData={{ name: 'John' }} />

// Controlled: use data + onChange
const [formData, setFormData] = useState({ name: '' });
<Form schema={schema} data={formData} onChange={({ data }) => setFormData(data)} />