Form Modes

Overview

The Joyfill Components SDK supports three distinct modes that control how users can interact with your forms: Edit Mode, Fill Mode, and Read-Only Mode.

Edit Mode (Default)

Edit Mode (edit) is the default mode that allows full form design, styling, and configuration capabilities.

 <JoyDoc 
	 doc={document} 
	 onChange={handleChange} 
	 mode="edit" 
 />

Features:

• Full form design and layout capabilities
• Field creation, editing, and deletion
• Field positioning and resizing
• Form styling and theme customization
• Page management (create, duplicate, delete)
• Table and collection field management
• Formula configuration
• Field settings and validation rules
• All interactive design elements are functional

Fill Mode

Fill Mode (fill) allows users to input data into pre-configured forms without design capabilities.

const documentEditor = (
  <JoyDoc
    doc={document}
    onChange={handleChange}
    mode="fill"  // Must be explicitly set
  />
)

Features:

• Users can input data into all field types
• File uploads and camera capture are enabled
• Form validation is active
• Page navigation is available for multi-page forms
• Field interactions (focus, blur, change) are tracked
• All data entry functionality is operational
• Design elements are hidden or disabled

Read-Only Mode

Read-Only Mode (readonly) displays forms for viewing only, preventing any user modifications.

const documentEditor = (
  <JoyDoc
    doc={document}
    onChange={handleChange}
    mode="readonly"  // Must be explicitly set
  />
)

Features:

• All fields are disabled for input
• File uploads and camera capture are disabled
• Form data is displayed but cannot be modified
• Page navigation remains functional for multi-page forms
• Field interactions are limited to viewing
• All design and editing capabilities are disabled
• Form validation is not enforced

Mode Comparison

Feature	Edit Mode	Fill Mode	Read-Only Mode
Field Creation	✅	❌	❌
Field Editing	✅	❌	❌
Field Positioning	✅	❌	❌
Data Input	✅	✅	❌
File Uploads	✅	✅	❌
Form Validation	✅	✅	❌
Page Management	✅	❌	❌
Formula Configuration	✅	❌	❌
Theme Customization	✅	❌	❌
Field Settings	✅	❌	❌
Page Navigation	✅	✅	✅
Print/Export	✅	✅	✅