PropertyValidation

Import it from @grafloria/renderer.

Validation rules for property values

ts
interface PropertyValidation

Properties

Name	Type	Description
`required?`	`boolean`	Whether the property is required
`minLength?`	`number`	Minimum string length (for string properties)
`maxLength?`	`number`	Maximum string length (for string properties)
`pattern?`	`string`	Regular expression pattern (for string properties)
`min?`	`number`	Minimum value (for number properties)
`max?`	`number`	Maximum value (for number properties)
`step?`	`number`	Step increment (for number properties)
`integer?`	`boolean`	Whether the number must be an integer (for number properties)
`enum?`	`any[]`	Allowed values (for select/multiselect properties)
`options?`	`SelectOption[]`	Options for select/multiselect (alternative to enum with more control)
`jsonSchema?`	`any`	JSON Schema for validating JSON properties
`placeholder?`	`string`	Placeholder text for input fields
`prefix?`	`string`	Prefix text to display before input (e.g., "$" for currency)
`suffix?`	`string`	Suffix text to display after input (e.g., "px" for pixels)
`presets?`	`string[]`	Preset color values for color picker
`accept?`	`string`	Accepted file types (for file uploads)
`multiple?`	`boolean`	Allow multiple file selection
`maxSize?`	`number`	Maximum file size in bytes
`custom?`	`(value: any, allValues: Record<string, any>) => ValidationError \| null`	Custom validation function

Example

String validation

typescript
const validation: PropertyValidation = {
  required: true,
  minLength: 3,
  maxLength: 50,
  pattern: '^[a-zA-Z]+$'
};

Example

Number validation

typescript
const validation: PropertyValidation = {
  required: true,
  min: 0,
  max: 100,
  step: 5
};

Example

Custom validation

typescript
const validation: PropertyValidation = {
  custom: (value, allValues) => {
    if (value < allValues.minValue) {
      return { message: 'Must be greater than minimum' };
    }
    return null;
  }
};

Was this page helpful?