kayee-blogpost-byoc-validation-numeric-minmax.tsx

FEAAS.External.registerComponent(MyByocComponent, {
  name: 'MyByocComponent',
  properties: {
    title: {
      title: 'Title',
      type: 'string',
      enum: ['Mr', 'Mrs', 'Miss', 'Ms', 'Dr'],
      description: 'Please select an appropriate title',
    },
    tags: {
      type: 'array',
      title: 'Tags',
      items: {
        type: 'string',
        enum: ['Sitecore', 'XM Cloud', 'BYOC', 'JSS', 'Next.js'],
      },
      uniqueItems: true,
    },
    percentage: {
      title: 'Percentage',
      type: 'integer',
      minimum: 0,
      maximum: 100,
      description: 'Please fill in a number between 0 and 100',
    },
    firstName: {
      title: 'First Name',
      type: 'string',
      minLength: 2,
      maxLength: 50,
    },
    lastName: {
      title: 'Last Name',
      type: 'string',
    },
    columnsCount: {
      title: 'Columns count',
      type: 'number',
    },
  },
  required: ['firstName', 'lastName'],
  ui: {
    tags: {
      'ui:widget': 'checkboxes',
    },
  },
});