Skip to content

Schema API

Complete API reference for the v3sf schema format.

Root Schema

The root of every schema must have type: 'object' and a properties map.

ts
interface RootSchema {
  type: 'object'
  properties: Record<string, FieldSchema>
}

FieldSchema

Each key in properties defines a form field.

PropertyTypeDefaultDescription
typeValueType-Required. The field's value type.
titlestring-Display label
widgetstringInferred from typeWidget name to render
requiredboolean | stringfalseWhether the field is required. Accepts an expression string.
placeholderstring-Placeholder text
disabledboolean | stringfalseDisabled state. Accepts an expression string.
readonlyboolean | stringfalseRead-only state. Accepts an expression string.
hiddenboolean | stringfalseHidden state. Accepts an expression string.
displayType'row' | 'column'InheritedLayout direction for label and input
classNamestring-Custom CSS class on the field wrapper
borderbooleanInheritedWhether to show a border
enum(string | number)[]-Option values for selection widgets
enumNames(string | number)[]-Option labels, corresponding 1:1 with enum
rulesValidatorRule | ValidatorRule[]-Validation rules
propsRecord<string, any>-Extra props forwarded to the underlying UI component. Values can be expression strings.
propertiesRecord<string, FieldSchema>-Nested fields when type is 'object'

ValueType

ts
type ValueType = 'string' | 'object' | 'array' | 'number' | 'boolean' | 'date' | (string & {}) // extensible
TypeJS TypeDefault Widget
stringstringinput
numbernumbernumber / stepper
booleanbooleanswitch
arrayany[]checkbox
datestring | Datedate
objectobjectRecursive render of child properties

SchemaRaw

The raw schema type before expression resolution. Any boolean, string, or number property can also be an expression string "{{ ... }}".

ts
type SchemaRaw = Stringify<SchemaBase>

Expression Strings

Any field property that accepts boolean | string can be given an expression like "{{ $values.age >= 18 }}". Values inside props can also be expressions.

Available context variables:

VariableDescription
$valuesFull form data object
$selfValueCurrent field's value
$depsExternal dependencies from the deps prop

Example

json
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "Full Name",
      "required": true,
      "placeholder": "Enter your name"
    },
    "role": {
      "type": "string",
      "title": "Role",
      "widget": "select",
      "enum": ["developer", "designer", "manager"],
      "enumNames": ["Developer", "Designer", "Manager"]
    },
    "teamSize": {
      "type": "number",
      "title": "Team Size",
      "widget": "stepper",
      "hidden": "{{ $values.role !== 'manager' }}",
      "required": "{{ $values.role === 'manager' }}",
      "props": {
        "min": 1,
        "max": "{{ $deps.maxTeamSize || 50 }}"
      }
    }
  }
}

Released under the MIT License.