The Forge library extends the Zod library. This means that you can use any Zod schema to validate the data that you want to store for your block. The Forge extends the zod schemas with the layout function property that allows you to define the layout of the data in the Typebot editor.

Options extends the z.ZodObject<any> schema.

The Forge provide convenient functions to create the options schema for you. Even though you could provide straight Zod schemas, we highly recommend using option functions to create the options schema.

Here is an example of how a schema can be created using the option and layout functions:

option.object({
  token: option.string.layout({
    label: 'Token',
    isRequired: true,
    placeholder: 'Type your token...',
    helperText: 'You can find your token [here](https://).',
  }),
  role: option.enum(['user', 'admin']).layout({
    defaultValue: 'user',
    label: 'Role',
  }),
  phoneNumber: option.string.layout({
    accordion: 'Advanced settings',
    label: 'Phone number',
    placeholder: 'Type your phone number...',
  }),
  address: option.string.layout({
    accordion: 'Advanced settings',
    label: 'Address',
    placeholder: 'Type your address...',
  }),
  isTestModeEnabled: option.boolean.layout({
    label: 'Test mode',
    defaultValue: true,
    helperText: 'Enable test mode to use a test account.',
  }),
})

​
Object

option.object({
  //...
})

​
String

Example:

option.string.layout({
  label: 'Name',
  placeholder: 'Type a name...',
  withVariableButton: false,
})

​
Number

Example:

option.number.layout({
  label: 'Temperature',
  defaultValue: 1,
  direction: 'row',
})

​
Boolean

option.boolean.layout({
  label: 'Test mode',
  moreInfoTooltip: 'Enable test mode to use a test account.',
})

​
Enum

Example:

option.enum(['user', 'admin']).layout({
  label: 'Role',
  defaultValue: 'user',
})

​
Discriminated unions

Example:

option.discriminatedUnion('type', [
  option.object({
    type: option.literal('user'),
    name: option.string.layout({ placeholder: 'Type a name...' }),
  }),
  option.object({
    type: option.literal('admin'),
    name: option.string.layout({ placeholder: 'Type a name...' }),
    phoneNumber: option.string.layout({
      placeholder: 'Type a phone number...',
    }),
  }),
])

​
Literal

Used mainly for discriminated unions. It is not visible on the Typebot editor.

Example:

option.literal('user')

​
Array

Use this to collect a list of values.

Example:

  • A list of names

    option.array(option.string.layout({ placeholder: 'Type a name...' })).layout({
  label: 'Names',
  itemLabel: 'name',
})

​
Helpers

​
Save Response Array

Use this to save the response of an array of options in variables.

For example if you want your user to be able to save the response of an HTTP request to variables:

option.saveResponseArray(['Message content', 'Total tokens']).layout({
  accordion: 'Save response',
})

You provide the list of all the possible response values to save.

​
Layout props

​
label
string

The label of the option. Will often be displayed right above the input.

​
placeholder
string

The placeholder of the input.

​
helperText
string

The helper text of the input. Will often be displayed below the input.

​
accordion
string

The name of the accordion where the option will be displayed in. For example if you’d like to group 2 properties in the same accordion named “Advanced settings”, you can write:

option.object({
  temperature: option.number.layout({
    accordion: 'Advanced settings',
  }),
  humidity: option.number.layout({
    accordion: 'Advanced settings',
  }),
})
​
direction
'row' | 'column'
default: "column"

The direction of the input. If set to row, the label will be displayed on the left of the input.

​
defaultValue
any

The default value of the input.

​
moreInfoTooltip
string

The tooltip that will be displayed when the user hovers the info icon of the input.

​
withVariableButton
boolean
default: "true"

Whether or not to display the variable button next to the input.

​
inputType
'variableDropdown' | 'textarea' | 'password'

The type of the input to display.

​
isRequired
boolean
default: "false"

Whether or not the input is required. Will display a red star next to the label if set to true.

​
fetcher
string

Set this if you’d like your input to provide a dropdown of dynamically fetched items.

option.string.layout({
  fetcher: 'fetchModels',
})

fetchModels should match the id of the fetcher that you defined in the fetchers prop of the action. See Fetcher for more information.

​
Array only

​
itemLabel
string

The label of the items of an array option. Will be displayed next to the “Add” label of the add button.

​
isOrdered
boolean
default: "false"

Whether or not the order of the items in an array schema matters. Will display “plus” buttons above and below when hovering on an item.

RunFetcher