Can we conditionally change field type based on a sibling value?

gak4u

2 weeks ago

9

• 

  Chris_Heinz

  2 weeks ago

  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
• 

  thisisnotchris

  2 weeks ago

  @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",
              },
            ],
          },

• 

  gak4u

  2 weeks ago

  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