Is it possible to add label to rjsf `oneOf` controling select?

user_10467064 0
Viewed 168

Let's take the default oneOf example from rjsf docs:

const schema = const schema = {
  type: 'object',
  oneOf: [
    {
      properties: {
        lorem: {
          type: 'string'
        }
      },
      required: ['lorem']
    },
    {
      properties: {
        ipsum: { type: 'string' }
      },
      required: ['ipsum']
    }
  ]
}

official codepen demo here

Is it possible to add a label to the select that switches between oneOf items?

graphical illustration

react-jsonschema-forms reactjs jsonschema
1 Answers

You can add a field (in the example I named it "dropdownField") whose value is the condition for showing the other fields.
That field can have a title just like the others.

{
  type: "object",
  properties: {
    dropdownField: {
      title: "Your label goes here",
      type: "string",
      enum: ["Option 1", "Option 2"],
      default: "Option 1",
    },
  },
  dependencies: {
    dropdown: {
      oneOf: [
        {
          properties: {
            dropdown: { enum: ["Option 1"] },
            lorem: {
              type: "string",
            },
          },
          required: ["lorem"],
        },
        {
          properties: {
            dropdown: { enum: ["Option 2"] },
            ipsum: {
              type: "string",
            },
          },
          required: ["ipsum"],
        },
      ],
    },
  },
}

You can read more at the "dependencies" page.

user_6516760
Related