Content block
Editable rows
Repeated fields with add and remove actions, numbering, and single-amount mode.
- Copy the bindings from
- app/
features/ payments/ routes/ dashboard/ adoption-fees.typeId/ components/ rule-form.tsx - Route
- /
dashboard/ accounts/ :acctId/ sites/ :siteId/ adoption-fees/ :typeId
Empty
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<EditableRows
title="Age tiers"
rows={[]}
onRemove={onRemove}
addAction={{
label: 'Add tier',
onPress: onPress,
}}
/>
</Form>Single amount
Printed props
<Form
validator={{
validate: validate,
}}
defaultValues={{
flatFee: 250,
}}
onSubmit={onSubmit}
>
<EditableRows
title="Adoption fee"
singleAmount
rows={[
{
id: 'flat',
label: 'adoption fee',
canRemove: false,
fields: <FormMoneyInput
name="flatFee"
label="Adoption fee"
className="w-48"
minValue={0}
/>,
},
]}
/>
</Form>Many and protected first row
Printed props
<Form
validator={{
validate: validate,
}}
defaultValues={{
'age-birth': 8,
'unit-birth': 'years',
'fee-birth': 450,
'age-one-year': 1,
'unit-one-year': 'years',
'fee-one-year': 350,
'age-eight-years': 8,
'unit-eight-years': 'years',
'fee-eight-years': 150,
}}
onSubmit={onSubmit}
>
<EditableRows
title="Age tiers"
rows={[
{
id: 'birth',
label: 'age tier 1',
canRemove: false,
fields: <>
<div
className="flex w-[10.5rem] shrink-0 items-start gap-1.5 sm:w-52"
>
<div
className="flex h-9 w-20 items-center rounded-md bg-gray-50 px-3 text-sm text-gray-500 ring-1 ring-inset ring-gray-200"
>
Birth
</div>
</div>
<FormMoneyInput
name="fee-birth"
aria-label="Fee for tier 1"
className="w-24 sm:w-32"
minValue={0}
/>
</>,
},
{
id: 'one-year',
label: 'age tier 2',
canRemove: true,
fields: <>
<div
className="flex w-[10.5rem] shrink-0 items-start gap-1.5 sm:w-52"
>
<>
<FormNumberInput
name="age-one-year"
ariaLabel="Age for tier 2"
label=""
className="w-16 sm:w-20"
minValue={0}
/>
<FormSelect
name="unit-one-year"
label="Age unit for tier 2"
labelClassName="sr-only"
className="w-24 sm:w-28"
options={[
{
id: 'months',
label: 'months',
},
{
id: 'years',
label: 'years',
},
]}
defaultValue="years"
/>
</>
</div>
<FormMoneyInput
name="fee-one-year"
aria-label="Fee for tier 2"
className="w-24 sm:w-32"
minValue={0}
/>
</>,
},
{
id: 'eight-years',
label: 'age tier 3',
canRemove: true,
fields: <>
<div
className="flex w-[10.5rem] shrink-0 items-start gap-1.5 sm:w-52"
>
<>
<FormNumberInput
name="age-eight-years"
ariaLabel="Age for tier 3"
label=""
className="w-16 sm:w-20"
minValue={0}
/>
<FormSelect
name="unit-eight-years"
label="Age unit for tier 3"
labelClassName="sr-only"
className="w-24 sm:w-28"
options={[
{
id: 'months',
label: 'months',
},
{
id: 'years',
label: 'years',
},
]}
defaultValue="years"
/>
</>
</div>
<FormMoneyInput
name="fee-eight-years"
aria-label="Fee for tier 3"
className="w-24 sm:w-32"
minValue={0}
/>
</>,
},
]}
onRemove={onRemove}
addAction={{
label: 'Add tier',
onPress: onPress,
}}
/>
</Form>Search and count
Printed props
<Form
validator={{
validate: validate,
}}
defaultValues={{
'tier-0': 25,
'tier-1': 50,
'tier-2': 75,
'tier-3': 100,
'tier-4': 125,
'tier-5': 150,
'tier-6': 175,
'tier-7': 200,
'tier-8': 225,
'tier-9': 250,
}}
onSubmit={onSubmit}
>
<EditableRows
title="Donation tiers"
showNumbers={false}
rows={[
{
id: '0',
label: 'Donation tier 1',
isRemoveDisabled: true,
fields: <FormMoneyInput
name="tier-0"
label="Tier 1"
/>,
},
{
id: '1',
label: 'Donation tier 2',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-1"
label="Tier 2"
/>,
},
{
id: '2',
label: 'Donation tier 3',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-2"
label="Tier 3"
/>,
},
{
id: '3',
label: 'Donation tier 4',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-3"
label="Tier 4"
/>,
},
{
id: '4',
label: 'Donation tier 5',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-4"
label="Tier 5"
/>,
},
{
id: '5',
label: 'Donation tier 6',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-5"
label="Tier 6"
/>,
},
{
id: '6',
label: 'Donation tier 7',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-6"
label="Tier 7"
/>,
},
{
id: '7',
label: 'Donation tier 8',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-7"
label="Tier 8"
/>,
},
{
id: '8',
label: 'Donation tier 9',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-8"
label="Tier 9"
/>,
},
{
id: '9',
label: 'Donation tier 10',
isRemoveDisabled: false,
fields: <FormMoneyInput
name="tier-9"
label="Tier 10"
/>,
},
]}
onRemove={onRemove}
addAction={{
label: 'Add tier',
onPress: onPress,
}}
/>
</Form>