Form Components

Select

The <Select> component adds a dropdown menu to a PDF form. The reader picks from a list of options you define through the select prop.

For a scrollable box rather than a dropdown, use List — it takes the same props. 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 }">Country</Text>
      <Select
        name="country"
        :select="['Nigeria', 'Ghana', 'Kenya', 'South Africa']"
        value="Nigeria"
        default-value="Nigeria"
        :style="{
          height: 20,
          borderWidth: 1,
          borderColor: '#cbd5e1',
        }"
      />
    </Page>
  </Document>
</template>

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

Editable and Sorted

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <!-- Sorted alphabetically, reader may type a custom value -->
      <Select
        name="role"
        edit
        sort
        no-spell
        :select="['Engineer', 'Designer', 'Analyst']"
        :style="{ height: 20 }"
      />
    </Page>
  </Document>
</template>

Empty Initial Selection

A dropdown always shows its first option. To start a field blank, include an empty string as the first option and set value to it:

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <Select
        name="country"
        :select="['', 'Nigeria', 'Ghana']"
        value=""
        default-value=""
        :style="{ height: 20 }"
      />
    </Page>
  </Document>
</template>

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