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

default discord avatar
gak4u
2 weeks ago
9

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.

  • default discord avatar
    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
  • default discord avatar
    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",
                },
              ],
            },
  • default discord avatar
    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

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.