schema.js

// Based on a field value, show some extra input fields
const schemaOne = {
  layout: [
    {
      type: 'grid',
      props: {
        cols: 2,
      },
      children: {
        default: [
          {
            name: 'firstName',
            label: 'First Name',
            type: 'input',
          },
          {
            name: 'lastName',
            label: 'Last Name',
            type: 'input',
            //if visible not defined explicitly its true
            visible: false,
            // field = field schema of this field
            // model = model of entire form
            hook: function(field, model) {
                return {
                    ...field,
                    //visible will be true if firstname is tom
                    visible: model.firstName === "tom"
                }
            }
          },
        ],
      },
    },
  ],
};

schema2.js

// Based on a field value, change the label of another field and disable another field.
const schemaTwo = {
  layout: [
    {
      type: "grid",
      props: {
        cols: 2,
      },
      children: {
        default: [
          {
            name: "firstName",
            label: "First Name",
            type: "input",
          },
          {
            name: "lastName",
            label: "Last Name",
            type: "input",
            // field = field schema of this field
            // model = model of entire form
            hook: function (field, model) {
              return {
                ...field,
                //label will change to middle name if first name is tom, else keep last name
                label: model.firstName === "tom" ? "Middle Name" : field.label,
                //field will be disabled if first name is ben
                ...(model.firstName === "ben" && { props: { disabled: true } }),
              };
            },
          },
        ],
      },
    },
  ],
};