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) => {
const fields = {
drink: {
type: "radio",
options: [
{ label: "Water", value: "water" },
{ label: "Orange juice", value: "orange-juice" },
],
},
};
if (data.props.drink === "water") {
return {
...fields,
waterType: {
// ... Define field
},
};
}
return fields;
},
// ...
},
},
};Interactive Demo
Try changing the "drink" field
water (still)
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: ({ item }) => <h1>{item}</h1>,
},
},
};Interactive Demo
Try changing the "category" field
Limitations
The slot field is not currently supported by Dynamic Fields, but most use-cases can be achieved using Dynamic Props.