On this page
Forms
Batoi UIF forms should make the workflow state visible.
A form is not just a set of fields. It should communicate what is required, what is optional, what will happen next, and what output will be created.
Structure
Recommended structure:
- compact header
- status badge
- grouped fields
- inline validation or guidance
- preview panel
- primary submit action
- exportable submission packet
Validation
Client-side validation should guide the user before submission.
Production validation must also happen server-side.
Example
The Workflow Form example demonstrates:
- required field checks
- draft and submitted states
- live review packet preview
- JSON export