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.

import { FieldSet, View, Text, TextInput } from '@react-pdf/renderer';

const field = { height: 18, borderWidth: 1, borderColor: '#c9c2b6' };
const label = { fontSize: 9, color: '#3e3e3e', marginBottom: 4 };

const Address = () => (
  <FieldSet name="billing">
    <Text style={label}>Street</Text>
    <TextInput name="street" style={field} />
    <Text style={[label, { marginTop: 10 }]}>City</Text>
    <TextInput name="city" style={field} />
  </FieldSet>
);

Show preview

Valid props

Prop name	Description	Type	Default
name	The name of the FieldSet	String	undefined

Valid props

On this page