Form Components

FieldSet

The <FieldSet> component groups form fields under a shared name. It draws nothing on its own — its purpose is to create a hierarchy in the exported form data, so the same field name can be reused in different sections of a document.

New to forms? Start with the Forms guide.

Props

<FieldSet> does not take the common form props — it is a container, not a field.

Prop	Type	Default	Description
`name`*	`string`	—	Prefix applied to the names of the fields inside.
`style`	`Style \| Style[]`	—	Layout and decoration. FieldSet lays out like a View, so it can carry padding, borders, and background.

Usage

Two sections can each have a street and a city field without colliding:

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <FieldSet name="billing">
        <Text :style="{ fontSize: 10, marginBottom: 4 }">Street</Text>
        <TextInput name="street" :style="{ height: 24 }" />

        <Text :style="{ fontSize: 10, marginBottom: 4 }">City</Text>
        <TextInput name="city" :style="{ height: 24 }" />
      </FieldSet>

      <FieldSet name="shipping">
        <Text :style="{ fontSize: 10, marginBottom: 4 }">Street</Text>
        <TextInput name="street" :style="{ height: 24 }" />

        <Text :style="{ fontSize: 10, marginBottom: 4 }">City</Text>
        <TextInput name="city" :style="{ height: 24 }" />
      </FieldSet>
    </Page>
  </Document>
</template>

The fields above export as billing.street, billing.city, shipping.street, and shipping.city.

Layout

Although it is invisible to the form, a <FieldSet> participates in layout exactly like a View, so you can use it as the card or panel that wraps a section:

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <FieldSet
        name="applicant"
        :style="{
          padding: 16,
          borderWidth: 1,
          borderColor: '#e2e8f0',
          borderRadius: 4,
        }"
      >
        <Text :style="{ fontSize: 8, color: '#94a3b8', marginBottom: 12 }">
          APPLICANT
        </Text>

        <View :style="{ marginBottom: 12 }">
          <Text :style="{ fontSize: 10, marginBottom: 4 }">Full name</Text>
          <TextInput name="fullName" :style="{ height: 24 }" />
        </View>

        <View :style="{ flexDirection: 'row', alignItems: 'center', gap: 6 }">
          <Checkbox name="consent" :style="{ width: 12, height: 12 }" />
          <Text :style="{ fontSize: 9 }">I consent to being contacted</Text>
        </View>
      </FieldSet>
    </Page>
  </Document>
</template>

Limitations

Only <TextInput> and <Checkbox> are namespaced by their enclosing <FieldSet>. <Select> and <List> always register at the top level of the form, so they need globally unique names.

<FieldSet> also cannot be nested inside another <FieldSet>. Use a single level of grouping per field.

Fields do not have to be direct children of the <FieldSet>. Any field anywhere in the subtree picks up the prefix, so you are free to nest <View>s for layout.