Content block
Default form mappings
Compact rows for configured animal types and their form selectors.
- Copy the bindings from
- app/
features/ forms/ routes/ dashboard/ forms.settings/ components/ default-forms-list.tsx - Route
- /
dashboard/ accounts/ :acctId/ sites/ :siteId/ forms/ settings
Empty
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<FormMappingList
title="Default adoption forms"
rows={[]}
emptyMessage="No animal types configured yet, so the button is hidden everywhere. Add the types you take in."
onRemove={onRemove}
addAction={{
label: 'Add animal type',
onPress: onPress,
}}
/>
</Form>One chosen type
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<FormMappingList
title="Default adoption forms"
rows={[
{
id: 'Cat',
label: 'Cat',
field: <FormSelect
name="one-Cat"
label="Cat adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="cat-adoption"
/>,
},
]}
emptyMessage="No animal types configured yet, so the button is hidden everywhere. Add the types you take in."
/>
</Form>Chosen types with add and remove
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<FormMappingList
title="Default adoption forms"
rows={[
{
id: 'Cat',
label: 'Cat',
field: <FormSelect
name="chosen-Cat"
label="Cat adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="cat-adoption"
/>,
},
{
id: 'Dog',
label: 'Dog',
field: <FormSelect
name="chosen-Dog"
label="Dog adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="dog-adoption"
/>,
},
]}
emptyMessage="No animal types configured yet, so the button is hidden everywhere. Add the types you take in."
onRemove={onRemove}
addAction={{
label: 'Add animal type',
onPress: onPress,
}}
/>
</Form>Several configured types
Printed props
<Form
validator={{
validate: validate,
}}
onSubmit={onSubmit}
>
<FormMappingList
title="Default adoption forms"
rows={[
{
id: 'Cat',
label: 'Cat',
field: <FormSelect
name="many-Cat"
label="Cat adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="cat-adoption"
/>,
},
{
id: 'Dog',
label: 'Dog',
field: <FormSelect
name="many-Dog"
label="Dog adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="dog-adoption"
/>,
},
{
id: 'Rabbit',
label: 'Rabbit',
field: <FormSelect
name="many-Rabbit"
label="Rabbit adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="dog-adoption"
/>,
},
{
id: 'Bird',
label: 'Bird',
field: <FormSelect
name="many-Bird"
label="Bird adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="dog-adoption"
/>,
},
{
id: 'Reptile',
label: 'Reptile',
field: <FormSelect
name="many-Reptile"
label="Reptile adoption form"
labelClassName="sr-only"
className="min-w-0 flex-1"
options={[
{
id: 'cat-adoption',
label: 'Cat Adoption Form',
},
{
id: 'dog-adoption',
label: 'Dog Adoption Form',
},
{
id: 'small-animal-adoption',
label: 'Small Animal Adoption Form',
},
]}
defaultValue="dog-adoption"
/>,
},
]}
emptyMessage="No animal types configured yet, so the button is hidden everywhere. Add the types you take in."
/>
</Form>