Content block
Read-only people
Bordered recipient rows with identifying facts, count, and search.
- Copy the bindings from
- app/
features/ contracts/ routes/ dashboard/ contracts.checkout-preview/ components/ notification-section.tsx - Route
- /
dashboard/ accounts/ :acctId/ sites/ :siteId/ contracts/ checkout-preview
Empty
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<PeopleList
people={[]}
/>
</Form>One
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<PeopleList
people={[
{
id: 'alexis',
name: 'Alexis Rivera',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
]}
/>
</Form>Many
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<PeopleList
people={[
{
id: 'alexis',
name: 'Alexis Rivera',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: 'jordan',
name: 'Jordan Lee',
detail: 'Nov 2, 2026',
facts: 'Cedar · Adoption Application',
},
]}
/>
</Form>Search and count
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<PeopleList
people={[
{
id: '0',
name: 'Applicant 1',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '1',
name: 'Applicant 2',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '2',
name: 'Applicant 3',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '3',
name: 'Applicant 4',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '4',
name: 'Applicant 5',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '5',
name: 'Applicant 6',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '6',
name: 'Applicant 7',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '7',
name: 'Applicant 8',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '8',
name: 'Applicant 9',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
{
id: '9',
name: 'Applicant 10',
detail: 'Nov 4, 2026',
facts: 'Brie · Adoption Application',
},
]}
/>
</Form>