Form Design Best Practices

YH-UI's form components, especially FormSchema, are suitable for schema-driven forms that need unified field definitions, validation rules, and rendering logic.

Why Choose YH-UI Form?

1. High Logic Cohesion

In traditional development, form layout, data linkage, and validation logic are often scattered across template, script, and lengthy watch blocks. YH-UI consolidates this logic into a single JSON configuration via FormSchema:

Declarative Linkage: Calculate UI behavior directly from the current model state using props and hidden functions.
Integrated Layout: The schema supports column-based layout configuration so related form structure can stay in one place.

2. Ultimate Type Safety (DX)

The form package also exposes TypeScript types for schema instances and form instances:

Precise Inference: The exported FormSchemaInstance provides complete API autocompletion.
Public Instance Types: FormSchemaInstance and FormInstance can be imported from the public package exports.

3. Robustness and Safety

Validation APIs: validate, resetFields, clearValidate, and scrollToField are exposed by the schema/form instances.
Model Access: FormSchemaInstance also exposes getModel, setFieldValue, and formRef.

Advanced Application Example

This example demonstrates the YH-UI form engine's ability to handle complex logic: Dynamic grouping, multi-level linkage, async validation, custom rendering, and full type safety.

Enterprise Onboarding Form

Form Design Best Practices ​

Why Choose YH-UI Form? ​

1. High Logic Cohesion ​

2. Ultimate Type Safety (DX) ​

3. Robustness and Safety ​

Advanced Application Example ​