Form Components

TextInput

The <TextInput> component adds an interactive text field to a PDF form. Readers can type into it, and the value is exported under the field's name.

New to forms? Start with the Forms guide.

Props

Prop	Type	Default	Description
`name`	`string`	`''`	Field identifier. This is the key the value is exported under.
`value`	`string \| number`	—	The field's current value.
`defaultValue`	`string \| number`	—	The value the field reverts to when the form is reset.
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Horizontal alignment of the text inside the field.
`multiline`	`boolean`	`false`	Allows the value to wrap across multiple lines.
`password`	`boolean`	`false`	Masks the typed characters.
`noSpell`	`boolean`	`false`	Disables the reader's spell check for this field.
`fontSize`	`number`	—	Size of the field text. Omit or set to 0 for auto sizing.
`maxLength`	`number`	—	Maximum number of characters the field accepts.
`format`	`TextInputFormatting`	—	Display and validation formatting. See Formatting below.
`required`	`boolean`	`false`	Marks the field as mandatory before the form can be submitted.
`readOnly`	`boolean`	`false`	Displays the value but prevents the reader from editing it.
`noExport`	`boolean`	`false`	Excludes the field from the exported form data.
`style`	`Style \| Style[]`	—	Size, position, and border of the field box.

Usage

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <Text :style="{ fontSize: 10, marginBottom: 4 }">Full name</Text>
      <TextInput
        name="fullName"
        value="Ada Lovelace"
        :style="{
          height: 24,
          borderWidth: 1,
          borderColor: '#cbd5e1',
        }"
      />
    </Page>
  </Document>
</template>

A <TextInput> has no intrinsic size. Always give it a height — and a width if it is not stretching to fill its parent — or it will be invisible.

Multiline

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <TextInput
        name="notes"
        multiline
        no-spell
        :max-length="500"
        align="left"
        :style="{ height: 100, fontSize: 9 }"
      />
    </Page>
  </Document>
</template>

Formatting

The format prop attaches keystroke and display formatters to the field. It takes an object with a type and, for some types, extra parameters:

Prop	Type	Default	Description
`type`*	`'date' \| 'time' \| 'percent' \| 'number' \| 'zip' \| 'zipPlus4' \| 'phone' \| 'ssn'`	—	The kind of formatting to apply.
`param`	`string`	—	Format mask for date and time types, e.g. 'dd/mm/yyyy' or 'HH:MM'.
`nDec`	`number`	—	Number of decimal places. Used by number and percent.
`sepComma`	`boolean`	—	Use a comma as the thousands separator. Used by number and percent.
`negStyle`	`'MinusBlack' \| 'Red' \| 'ParensBlack' \| 'ParensRed'`	—	How negative values are displayed. Used by number.
`currency`	`string`	—	Currency symbol to display. Used by number.
`currencyPrepend`	`boolean`	—	Place the currency symbol before the value rather than after. Used by number.

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <!-- dd/mm/yyyy date field -->
      <TextInput
        name="dob"
        :format="{ type: 'date', param: 'dd/mm/yyyy' }"
        :style="{ height: 24 }"
      />

      <!-- Currency with two decimals and thousands separators -->
      <TextInput
        name="total"
        :format="{
          type: 'number',
          nDec: 2,
          sepComma: true,
          negStyle: 'ParensRed',
          currency: '$',
          currencyPrepend: true,
        }"
        :style="{ height: 24 }"
      />

      <!-- Phone number -->
      <TextInput
        name="phone"
        :format="{ type: 'phone' }"
        :style="{ height: 24 }"
      />
    </Page>
  </Document>
</template>

Formatting is embedded in the PDF as JavaScript. Acrobat executes it; most browser viewers and many other readers do not. Never rely on it to validate data you care about — validate on the way in instead.

Grouping

Wrap fields in a FieldSet to namespace them, so the same field name can be reused across sections of the form.