👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Invalid shape of predefined choices

As a general rule, the list of possible choices for array types must only contain values of valid item types for the array.

{
  type: 'array',
  name: 'colors'
  of: [
    {
      type: 'object',
      name: 'webColor',
      fields: [
        {name: 'name', type: 'string'},
        {name: 'hex', type: 'string'}
      ]
    },
    {
      type: 'object',
      name: 'rgbaColor',
      fields: [
        {name: 'name', type: 'string'},
        {name: 'r', type: 'number'},
        {name: 'g', type: 'number'},
        {name: 'b', type: 'number'},
        {name: 'a', type: 'number'},
      ]
    },
  ],

  options: {
    list: [
      // valid
      {_type: 'webColor', hex: '438D80', name: 'Sea Turtle Green'},

      // valid
      {_type: 'rgbaColor', r: 161, g: 201, b: 53, name: 'Salad Green'},


      // invalid (as of v3), object values can not be given a title
      {title: 'Sea Turtle Green', value: {_type: 'webColor', hex: 'C88141', name: 'Tiger Orange'}},

      // invalid, missing _type
      {hex: '438D80', name: 'Sea Turtle Green'},

      // invalid: hslaColor objects not valid for array
      {_type: 'hslaColor' h: 0.02, s: 0.93, l: 0.71, name: 'Salmon'},
      
    ]
  }
}

A notable exception here is choices for primitive values, which can be given a display title by providing an object with title and value, where value is of a valid item type:

{
  type: 'array',
  name: 'numbersAndAnimals'
  of: [{type: 'string'}, {type: 'number'}],

  options: {
    list: [
      // valid: this array can contain strings
      'sheep',

      // valid: this array can contain numbers
      44,

      // valid: array can contain strings and primitive values can be given a display-title
      {title: 'Cat', value: 'cat'},

      // valid: array can contain numbers and primitive values can be given a display-title
      {title: 'Hundred', value: 100}
      
      // invalid: array can't contain booleans
      true,

    ]
  }
}

Was this article helpful?