DynamicForm.Instance.Element (DynamicForm v0.17.6)

Copy Markdown View Source

Represents a non-input element in a form using SurveyJS-compatible format.

Elements are used to add structure and information to forms without collecting user input. They support conditional visibility just like questions.

SurveyJS Element Types

  • "html" - HTML content (headings, paragraphs, dividers, etc.)
  • "panel" - Container for grouping questions together
  • "image" - Display an image (imageLink, imageWidth, imageHeight, imageFit)

Examples

# HTML element with heading
%Element{
  name: "section-heading",
  type: "html",
  html: "<h2>Personal Information</h2>"
}

# HTML element with paragraph
%Element{
  name: "privacy-notice",
  type: "html",
  html: "<p class='text-gray-600'>We take your privacy seriously.</p>"
}

# Panel element with nested questions
%Element{
  name: "address-panel",
  type: "panel",
  title: "Shipping Address",
  elements: [
    %Question{
      name: "street",
      type: "text",
      title: "Street"
    },
    %Question{
      name: "city",
      type: "text",
      title: "City"
    }
  ]
}

# Conditional element (only show when terms accepted)
%Element{
  name: "thank-you-message",
  type: "html",
  html: "<p>Thank you for accepting our terms!</p>",
  visibleIf: "{accept_terms} = true"
}

Summary

Types

t()

@type t() :: %DynamicForm.Instance.Element{
  elements: [DynamicForm.Instance.Question.t() | t()] | nil,
  enableIf: String.t() | nil,
  html: String.t() | nil,
  imageFit: String.t() | nil,
  imageHeight: String.t() | nil,
  imageLink: String.t() | nil,
  imageWidth: String.t() | nil,
  metadata: map() | nil,
  name: String.t(),
  slot: map() | nil,
  title: String.t() | nil,
  type: String.t(),
  visibleIf: String.t() | nil
}