Forms
React-pdf includes the ability to use AcroForm-Forms in pdfs. AcroForm is part of interactive pdfs and includes annotations for e.g. text fields, checkboxes. The AcroForm is automatically initialized as soon as one of the form elements is used.
TextInput
The <TextInput /> element represents a text field for inputting single- or multiline text.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| align | Defines the alignment of text | String | left |
| multiline | Defines if the user is allowed to input more than one line of text | Boolean | false |
| password | If set to true the text will be masked with e. g. * | Boolean | false |
| noSpell | If set to true tells the pdf viewer to not spellcheck the text | Boolean | false |
| format | Defines the format the textinput should be formatted to | TextInputFormatting | undefined |
| fontSize | Defines the font size for the text input. Set to 0 for auto-size | Number | undefined |
| maxLength | Defines the maximum number of characters | Number | undefined |
See also Common Form Attributes
TextInputFormatting
format is a definition how the value shall be formatted by the viewer. Take into account that not all viewers support this feature because it involves javascript execution.
| Prop name | Description | Type | Default |
|---|---|---|---|
| type | Defines the alignment of text | TextInputFormatType | undefined |
| param | Defines a format for certain types | String | undefined |
| nDec | Defines the number of places after the decimal point | Number | undefined |
| sepComma | Defines if the seperator shall be a comma or not | Boolean | false |
| negStyle | Defines style for negative numbers | String | undefined |
| currency | Defines the symbol to be placed as currency sign | String | undefined |
| currencyPrepend | If set to true the currency sign is prepended | Boolean | false |
TextInputFormatType
type prop can take one of the following values.
| Value | Description |
|---|---|
| date | Expects the param prop to be a valid date format. |
| time | Expects the param prop to be a valid time format. |
| percent | Uses the props nDec, sepComma, negStyle, currency, currencyPrepend. |
| number | Uses the props nDec, sepComma, negStyle, currency, currencyPrepend. |
| zip | Formats for the zip-code standard |
| zipPlus4 | Formats for the zip+4 standard |
| phone | Formats for a phone number |
| ssn | Formats for a ssn number |
For deeper knowledge into the formatting you might want to look into the pdfkit doc and into the API Reference for Forms Page 119.
Checkbox
The <Checkbox /> element represents one of two states the user can toggle between. Some viewers behave differently based on wether the name prop is set or not and wether there are name duplicates or not. This can result in inconsistencies which makes the name prop recommendable to use and to achieve a consistent result across various viewers.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| backGroundColor | It defines the color of the inside of the checkbox it applies to | String | undefined |
| borderColor | Defines the color used to paint the outline of the checkbox | String | undefined |
| checked | If set to true the checkbox is checked | Boolean | false |
| onState | If set to true tells the pdf viewer to not spellcheck the text | String | Yes |
| offState | Defines the format the textinput should be formatted to | String | No |
| xMark | If set to true the onState appears as a X otherwise a checkmark is displayed | Boolean | false |
See also Common Form Attributes
Select
The <Select /> element represents a dropdown menu for the selection of predefined options.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| edit | If set to true allows the user to enter a value in the field | Boolean | false |
| noSpell | If set to true and edit is set to true it tells the pdf viewer to not spellcheck the text | Boolean | false |
For more attributes head to Select and List Attributes.
List
The <List /> element represents a scrollable list for the selection of predefined options.
Valid props
For attributes head to Select and List Attributes.
Select and List Attributes
These attributes are shared by the Select and List elements.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| sort | Defines if the options shall be sorted alphabetically | Boolean | false |
| multiSelect | If set to true the user is allowed to select multiple options | Boolean | false |
| select | Defines the options to show inside the field as an array | String[] | [] |
See also Common Form Attributes
FieldSet
The <FieldSet /> element is used to group other form elements together. On the form level this creates a hierarchical structure most important for data extraction and naming clearance. It is fully invisible. The usage of this element is optional and not required by any other element. Because of not being an element on its own the FieldSet is the only element not sharing the common form attributes.
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| name | The name of the FieldSet | String | undefined |
Common Form Attributes
Common form attributes are attributes that are shared by a variety of elements.
Supported attributes
| Prop name | Description | Type | Default |
|---|---|---|---|
| name | Describes the name of the specific element when submitting the form | String | empty |
| required | Describes if the specific element needs to have a value when submitting the form | Boolean | false |
| noExport | If set to true the specific element is not exported at a form submission | Boolean | false |
| readOnly | Defines if the specific element is editable or not. If set to true, the user shall not edit the value. | Boolean | false |
| value | Defines the value of the specific element. For further information look at the element. | String, Number | undefined |
| defaultValue | Describes what the default state for the value is. Can be used when resetting the form. | String, Number | undefined |
