Guide

Form Fields

Work with interactive PDF form fields

KViewer auto-detects and renders interactive form fields from PDFs. Users can fill in text inputs, check boxes, select radio buttons, choose from dropdowns, and place signatures.

Supported Field Types

Type	Description
Text	Single or multi-line text input
Checkbox	Toggle on/off
Radio	Mutually exclusive options within a group
Dropdown	Select from a list of options
Signature	Signature capture field
Button	Clickable button with label

Read Form Field Values

Use the template ref to read all form field values:

<template>
  <div class="h-screen">
    <KViewer ref="viewer" :source="'/Form.pdf'" />
    <button @click="readValues">Read Form</button>
  </div>
</template>

<script setup lang="ts">
const viewer = ref()

function readValues() {
  const fields = viewer.value?.getFormFieldValues()
  // Returns FormFieldValue[] with fieldId, fieldName, fieldType, and value
  console.log(fields)
}
</script>

Each FormFieldValue contains:

interface FormFieldValue {
  fieldId: string
  fieldName: string
  fieldType: 'text' | 'checkbox' | 'radio' | 'dropdown' | 'signature' | 'button'
  value: string | boolean | string[]
}

Set Form Field Values Programmatically

Pre-fill form fields using setFormFieldValue:

const viewer = ref()

// Fill a text field
viewer.value?.setFormFieldValue('email', 'user@example.com')

// Check a checkbox
viewer.value?.setFormFieldValue('agree_terms', true)

// Select a radio option
viewer.value?.setFormFieldValue('payment_method', 'credit_card')

// Select a dropdown option
viewer.value?.setFormFieldValue('country', 'DE')

Enable Shape Detection

Some PDFs use drawn shapes (rectangles, circles) to represent checkboxes instead of proper form fields. Enable shape detection to auto-detect these and convert them to interactive checkboxes:

<KViewer
  :source="pdfUrl"
  shape-detection
/>

Shape detection scans page content for rectangular and circular shapes that match common checkbox dimensions and creates synthetic form fields for them.

Shape detection works best on scanned forms with clearly drawn checkbox outlines. Enable it on a per-document basis using the shapeDetection prop.

Export with Form Data

Form field values are automatically included when exporting the PDF:

const bytes = await viewer.value?.exportPdf({ flatten: true })
// The exported PDF includes all filled form field values