Form Components

List

The <List> component adds a scrollable option box to a PDF form. It is the same field type as Select and takes the same props — the difference is that a list shows several options at once instead of collapsing into a dropdown.

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.
`select`	`string[]`	`[]`	The options the reader can choose from.
`value`	`string \| number`	—	The currently selected option.
`defaultValue`	`string \| number`	—	The option the field reverts to when the form is reset.
`edit`	`boolean`	`false`	Allows the reader to type a value that is not in the list.
`sort`	`boolean`	`false`	Displays the options in alphabetical order.
`multiSelect`	`boolean`	`false`	Allows more than one option to be selected.
`noSpell`	`boolean`	`false`	Disables spell check on typed values. Only meaningful with edit.
`required`	`boolean`	`false`	Marks the field as mandatory before the form can be submitted.
`readOnly`	`boolean`	`false`	Displays the selection but prevents the reader from changing 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 }">Preferred language</Text>
      <List
        name="language"
        :select="['English', 'French', 'Yoruba', 'Hausa', 'Igbo']"
        value="English"
        default-value="English"
        :style="{
          height: 60,
          borderWidth: 1,
          borderColor: '#cbd5e1',
        }"
      />
    </Page>
  </Document>
</template>

Give a list enough height to show several rows — roughly the number of visible options times your font size. Too little height and the reader shows a single cramped row with a scrollbar.

Multiple Selection

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <List
        name="skills"
        multi-select
        sort
        :select="['Vue', 'TypeScript', 'Node', 'Rust']"
        :style="{ height: 70 }"
      />
    </Page>
  </Document>
</template>

Unlike <TextInput> and <Checkbox>, a <List> is not namespaced by an enclosing FieldSet — it always registers at the top level of the form. Give every list a globally unique name.