I have a scenario where user needs to select a field type, based on selection I want to show either a text field or a richText field for a sibling field in the same collection. As of now to make this work, I have 2 fields which I conditionally show/hide based on field type selection.
You could use a custom component from type ui and handle it by yourself as you can access the values from other input fields with the useFields or useFormFields hook.
https://payloadcms.com/docs/admin/hooks#usefield@gak4u I think this is what conditions are for and they should work nicely
Is the condition feature for fields not suitable?
I imagine you would do something like
{
name: "linkUrl",
label: "Link URL",
type: "text",
required: false,
admin: {
condition: (data, siblingData, { user }) => {
if (siblingData.linkType === "url") {
return true;
} else {
return false;
}
},
},
},
where linkType is a select field type
{
name: "linkType",
type: "select",
hasMany: false,
defaultValue: "url",
admin: {
description:
"Select if the Link should go to another page, a PDF, or show a modal with text.",
},
options: [
{
label: "Link",
value: "url",
},
{
label: "PDF",
value: "pdf",
},
{
label: "Text",
value: "text",
},
],
},
This is precisely what I am doing right now, but I am ending up having 2 separate fields to handle both senarios
[
{
name: "value",
type: "text",
label: "Value",
required: true,
admin: {
condition: (_, siblingData) => siblingData.type !== 'richText',
}
},
{
name: "rvalue",
type: "richText",
label: "Value",
admin: {
condition: (_, siblingData) => siblingData.type === 'richText',
}
},
But as @Chris_Heinz suggested, using a custom component will be a better solution
@Chris_Heinz Thanks for the suggestion, I will try it out
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.