> ## Documentation Index
> Fetch the complete documentation index at: https://docs.typebot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Options

The Forge library extends the [Zod](https://github.com/colinhacks/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 stores layout metadata on schemas using Zod's `meta()` API so the Typebot editor can render the right inputs.

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` helpers and `meta()`:

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

![Layout label](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=64094ead18b75cf20f07e7bd6ca5e233)

## Object

```ts theme={null}
option.object({
  //...
})
```

## String

Example:

```ts theme={null}
option.string.meta({ layout: {
  label: 'Name',
  placeholder: 'Type a name...',
  withVariableButton: false,
} })
```

![Layout string example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-string-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=a3cfa6db9d1fa4a34a4045c7dc7902fd)

## Number

Example:

```ts theme={null}
option.number.meta({ layout: {
  label: 'Temperature',
  defaultValue: 1,
  direction: 'row',
} })
```

![Layout number example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-number-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=12b4a2a5a81b41f83bb7d5a2b1d73ca9)

## Boolean

```ts theme={null}
option.boolean.meta({ layout: {
  label: 'Test mode',
  moreInfoTooltip: 'Enable test mode to use a test account.',
} })
```

&#x20;

![Layout boolean example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-boolean-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=c6f0a8e498029eaa7afa6ce9ad8e2bc1)

## Enum

Example:

```ts theme={null}
option.enum(['user', 'admin']).meta({ layout: {
  label: 'Role',
  defaultValue: 'user',
} })
```

![Layout enum example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-enum-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=9571ff2c8a769229564fedee0a8ebfa2)

## Discriminated unions

Example:

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

![Layout discriminated union example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-discriminated-union-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=0823e1f022c77c2d785c684394a09075)

## Literal

Used mainly for [discriminated unions](https://docs.typebot.com/contribute/the-forge/options.md#discriminated-unions). It is not visible on the Typebot editor.

Example:

```ts theme={null}
option.literal('user')
```

## Array

Use this to collect a list of values.

Example:

* A list of names

  ```ts theme={null}
  option.array(option.string.meta({ layout: { placeholder: 'Type a name...' } })).meta({ layout: {
    label: 'Names',
    itemLabel: 'name',
  } })
  ```

  ![Layout array example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-array-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=dfc04c2b13023b0c88608ff5358350f1)

## 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:

```ts theme={null}
option.saveResponseArray(['Message content', 'Total tokens']).meta({ layout: {
  accordion: 'Save response',
} })
```

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

![Layout save response array example](https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/layout-save-response-example.png?fit=max\&auto=format\&n=rHkgfCATWjP6ntzz\&q=85\&s=36d0934b255bad63875620c1cd190da2)

## 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:

```ts theme={null}
option.object({
  temperature: option.number.meta({ layout: {
    accordion: 'Advanced settings',
  } }),
  humidity: option.number.meta({ 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.

```ts theme={null}
option.string.meta({ layout: {
  fetcher: 'fetchModels',
} })
```

`fetchModels` should match the `id` of the fetcher that you defined in the
`fetchers` prop of the action. See [Fetcher](https://docs.typebot.com/contribute/the-forge/fetcher.md) 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.