Dynamic Fields

Dynamic field resolution allows you to change the field configuration for a component based on the current component props.

Dynamic component fields

The resolveFields function allows you to make synchronous and asynchronous changes to the field configuration.

For example, we can set the configuration of one field based on the prop value of another:

const config = {
  components: {
    MyComponent: {
      resolveFields: (data) => ({
        fieldType: {
          type: "radio",
          options: [
            { label: "Number", value: "number" },
            { label: "Text", value: "text" },
          ],
        },
        value: {
          type: data.props.fieldType,
        },
      }),
      render: ({ value }) => <h1>{value}</h1>,
    },
  },
};

Interactive Demo

Try changing the "title" field

Hello, world

Making asynchronous calls

The resolveFields function also enables asynchronous calls.

Here's an example populating the options for a select field based on a radio field

const config = {
  components: {
    MyComponent: {
      resolveFields: async (data, { changed, lastFields }) => {
        // Don't call the API unless `category` has changed
        if (!changed.category) return lastFields;
 
        // Make an asynchronous API call to get the options
        const options = await getOptions(data.category);
 
        return {
          category: {
            type: "radio",
            options: [
              { label: "Fruit", value: "fruit" },
              { label: "Vegetables", value: "vegetables" },
            ],
          },
          item: {
            type: "select",
            options,
          },
        };
      },
      render: ({ value }) => <h1>{value}</h1>,
    },
  },
};

Interactive Demo

Try changing the "category" field

Dynamic Fields

Dynamic component fields

Making asynchronous calls

Further reading