> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```jsx theme={null}

 <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.

```jsx theme={null}
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.

```jsx theme={null}
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          | ✅         | ✅         | ✅              |