You can build a form schema using the builder pattern, as follows:

import {Forms} from "attio/client"

const schema = {
    name: Forms.string(),
    note: Forms.string().multiline(),
    nickname: Forms.string().optional(),
    age: Forms.number().min(18),
    numTokens: Forms.number().max(100),
    phoneNumbers: Forms.array(Forms.string()),
    addresses: Forms.array({
        street: Forms.string(),
        city: Forms.string(),
    }),
}

The allowed values are:

Forms.string()

A string value. Required by default.

Mutators

  • .default(value : string) sets a default value to return when no value is entered by the user. Note: This is NOT the same as an “initial value”, which should be passed to the useForm() hook.

  • multiline() will cause the string input to be multiline. i.e. a <textarea> rather than an <input> in DOM-speak.

  • optional() by default, strings are required. This will change that to let null, undefined and "" pass validation.

Forms.number()

A numeric value. Required by default.

Mutators

  • .default(value : number) sets a default value to return when no value is entered by the user. Note: This is NOT the same as an “initial value”, which should be passed to the useForm() hook.

  • optional() by default, numbers are required. This will change that to let null, undefined and "" pass validation.

  • min(min : number) provide a minimum value. Validation will fail if the user inputs number < min.

  • max(max : number) provide a maximum value. Validation will fail if the user inputs number > max.

Forms.array(FormValue | Record<string, FormValue>)

An array of other form values or objects of form values.

Mutators

  • optional() by default, arrays are required. This will change that to let null, undefined pass validation.