FB

Form Builder - Element Types

Complete documentation for all form field types

Text Input

Single line text input with pattern validation and length constraints.

Hidden Fields: Set hidden: true to hide the field from display while including its value in form data. Hidden fields use their default value and are not rendered in the form.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "text" (required)
  • key: Field identifier (required)
  • label: Display label for the field
  • placeholder: Placeholder text
  • required: Whether field is required (boolean)
  • minLength: Minimum character length (number)
  • maxLength: Maximum character length (number)
  • pattern: Regular expression for validation
  • default: Default value
  • description: Field description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

Textarea

Multi-line text input with configurable row height.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "textarea" (required)
  • key: Field identifier (required)
  • label: Display label for the field
  • placeholder: Placeholder text
  • rows: Number of visible rows (default: 4)
  • required: Whether field is required (boolean)
  • minLength: Minimum character length (number)
  • maxLength: Maximum character length (number)
  • default: Default value
  • description: Field description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

Number Input

Numeric input with min/max/step validation.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "number" (required)
  • key: Field identifier (required)
  • label: Display label for the field
  • placeholder: Placeholder text
  • required: Whether field is required (boolean)
  • min: Minimum value (number)
  • max: Maximum value (number)
  • step: Step increment for input controls
  • default: Default value
  • description: Field description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

Select Dropdown

Dropdown selection with predefined options.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "select" (required)
  • key: Field identifier (required)
  • label: Display label for the field
  • required: Whether field is required (boolean)
  • options: Array of {value, label} option objects (required)
  • default: Default selected value (must match an option value)
  • description: Field description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

File Upload

File upload with preview, drag-and-drop, and file type restrictions. Supports both single and multiple files.

Multiple Files: Set multiple: true to allow multiple file selection. Use min and max properties to control file count limits.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "file" (required)
  • key: Field identifier (required)
  • label: Display label for the field
  • required: Whether field is required (boolean)
  • accept: Object with file restrictions
  • accept.extensions: Array of allowed file extensions
  • accept.maxSize: Maximum file size in bytes
  • multiple: Allow multiple file selection (boolean)
  • minCount: Minimum number of files (when multiple is true)
  • maxCount: Maximum number of files (when multiple is true)
  • default: Default file resource ID or array for multiple
  • description: Field description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

Multiple Files (Legacy)

Multiple file uploads with grid preview, count limits, and drag-and-drop.

⚠️ Deprecated: The files type is deprecated. Use file with multiple: true instead for consistent API design.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "files" (required)
  • key: Field identifier (required)
  • label: Display label for the field
  • required: Whether field is required (boolean)
  • min: Minimum number of files (number)
  • max: Maximum number of files (number)
  • accept: Object with file restrictions
  • accept.extensions: Array of allowed file extensions
  • accept.maxSize: Maximum file size in bytes
  • default: Array of default file resource IDs
  • description: Field description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

Container

Nested object container with support for both single objects and repeatable arrays.

Multiple Containers: Set multiple: true to create repeatable container arrays. Use minCount and maxCount to control item limits.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "container" (required)
  • key: Field identifier (required)
  • label: Display label for the container
  • elements: Array of nested form elements (required)
  • multiple: Make container repeatable (boolean)
  • minCount: Minimum number of container instances (when multiple is true)
  • maxCount: Maximum number of container instances (when multiple is true)
  • description: Container description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)

Group Container (Legacy)

Nested object container with optional repeatable arrays (min/max items).

⚠️ Deprecated: The group type is deprecated. Use container with multiple: true instead. Groups use repeat: {min, max} syntax which is being replaced by minCount and maxCount properties.

Schema Definition

Live Preview

Read Only

Available Properties

  • type: "group" (required)
  • key: Field identifier (required)
  • label: Display label for the group
  • elements: Array of nested form elements (required)
  • repeat: Object to make group repeatable
  • repeat.min: Minimum number of group instances
  • repeat.max: Maximum number of group instances
  • description: Group description (shows in tooltip)
  • hint: Additional hint text (shows in tooltip)
  • actions: Array of action buttons for readonly mode
  • hidden: Hide field from form display but include in data (boolean)