react-pdfFormsTextInput
TextInput
The <TextInput /> element represents a text field for inputting single- or multiline text.
import { View, Text, TextInput } from '@react-pdf/renderer';
const field = { height: 18, borderWidth: 1, borderColor: '#c9c2b6' };
const label = { fontSize: 9, color: '#3e3e3e', marginBottom: 4 };
const NameField = () => (
<View>
<Text style={label}>Full name</Text>
<TextInput name="name" value="Ada Lovelace" style={field} />
</View>
);Show previewHide preview
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.