Content block
Page documents
Uploads and existing files aligned with the page’s form sections.
- Copy the bindings from
- app/
features/ contracts/ routes/ dashboard/ contracts.id/ contracts.id.tsx - Route
- /
dashboard/ accounts/ :acctId/ sites/ :siteId/ contracts/ :id
Ordered uploads
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentSection
items={[
{
id: 'vaccine',
name: 'Vaccination record.pdf',
caption: 'Nov 4, 2026',
},
{
id: 'care',
name: 'Home care instructions.pdf',
caption: 'Nov 3, 2026',
},
]}
onReorder={onReorder}
/>
</Form>Empty
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentSection
items={[]}
description="Supporting document links are included in the signed-contract email."
upload={<FormFileUpload
name="emptyPageFiles"
/>}
/>
</Form>One
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentSection
items={[
{
id: 'vaccine',
name: 'Vaccination record.pdf',
caption: 'Nov 4, 2026',
},
]}
upload={<FormFileUpload
name="onePageFile"
/>}
onRemove={onRemove}
/>
</Form>Many and search
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<DocumentSection
items={[
{
id: '0',
name: 'Contract attachment 1.pdf',
caption: 'Nov 4, 2026',
},
{
id: '1',
name: 'Contract attachment 2.pdf',
caption: 'Nov 4, 2026',
},
{
id: '2',
name: 'Contract attachment 3.pdf',
caption: 'Nov 4, 2026',
},
{
id: '3',
name: 'Contract attachment 4.pdf',
caption: 'Nov 4, 2026',
},
{
id: '4',
name: 'Contract attachment 5.pdf',
caption: 'Nov 4, 2026',
},
{
id: '5',
name: 'Contract attachment 6.pdf',
caption: 'Nov 4, 2026',
},
{
id: '6',
name: 'Contract attachment 7.pdf',
caption: 'Nov 4, 2026',
},
{
id: '7',
name: 'Contract attachment 8.pdf',
caption: 'Nov 4, 2026',
},
{
id: '8',
name: 'Contract attachment 9.pdf',
caption: 'Nov 4, 2026',
},
{
id: '9',
name: 'Contract attachment 10.pdf',
caption: 'Nov 4, 2026',
},
]}
description="Supporting document links are included in the signed-contract email."
upload={<FormFileUpload
name="pageFiles"
/>}
onRemove={onRemove}
/>
</Form>