Node Types

Treege provides three node types, each serving a specific purpose when building a flow.

Input Node

Form fields that collect user input. Supports 16 input types with validation and conditional logic.

Supported input types (set via the type field):

• Text inputs: text, password, number, textarea
• Selection: select, radio, checkbox, autocomplete
• Boolean: switch
• Date/Time: date, daterange, time, timerange
• Files: file
• Location: address
• API integration: http
• Other: hidden, submit

Common properties (data):

• type: The input type (one of the values above)
• name: Field name used for submission (falls back to label, then node id)
• label: Field label (string or multi-language object)
• required: Whether the field is required
• pattern: Regex pattern for validation
• errorMessage: Custom error message shown on validation failure
• placeholder: Placeholder text
• helperText: Helper text shown under the field
• options: Options for select/radio/checkbox/autocomplete
• multiple: Allow multiple selections / files (for select, checkbox, and file)
• defaultValue: Default value configuration (static or referenced from another field)
• httpConfig: API configuration (used with type: "http")
• optionsSource: Dynamic option list fetched from an HTTP endpoint

{
  id: "email",
  type: "input",
  data: {
    type: "text",
    name: "email",
    label: "Email Address",
    required: true,
    pattern: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
    placeholder: "you@example.com",
    errorMessage: "Please enter a valid email"
  }
}

Options

Option-based inputs (select, radio, checkbox, autocomplete) take an options array:

{
  id: "country",
  type: "input",
  data: {
    type: "select",
    name: "country",
    label: "Country",
    options: [
      { value: "fr", label: "France" },
      { value: "us", label: "United States" }
    ]
  }
}

Each option is { value: string; label: Translatable; description?: Translatable; disabled?: boolean; image?: string }.

UI Node

Display-only elements that don't collect input.

Properties (data):

• type: The UI element type — "title" or "divider"
• label: Content to display (used by title)

{
  id: "welcome",
  type: "ui",
  data: {
    type: "title",
    label: "Welcome to Our Survey"
  }
}

Supported UI types:

• title — a heading/section title
• divider — a visual separator between sections

Group Node

A container that organizes related nodes together. Groups are also what turn a flow into a multi-step form: at runtime, each contiguous slice of visible nodes sharing the same group becomes one navigable step with Back/Continue controls.

Properties (data):

• label: Group title (string or multi-language object) — shown as the step heading

{
  id: "personal-info",
  type: "group",
  data: {
    label: "Personal Information"
  }
}

Child nodes belong to a group by referencing it as their parentId (the standard React Flow parent/child relationship), not via a children array.