Skip to content

Add Custom Layout form field component to Shesha Form Builder #4804

@AlexanderSlavchovUX

Description

@AlexanderSlavchovUX

Description
Introduce a new form builder component called Custom Layout.

This component should behave like a form field container that includes a label, but instead of capturing its own value like a normal text field, it should allow users to drag and drop other form components inside it to build a custom field layout.

The goal is to give form designers a reusable container-type field that can group and arrange multiple child components under a single labeled section.

Expected Behavior

  • The component can be dragged from the component toolbox into the form builder.
  • It renders with a label like other form fields.
  • It provides an internal drop zone / container area.
  • Users can drag and drop other supported components into this container.
  • Nested components can be arranged and configured inside the Custom Layout field.
  • The Custom Layout itself should be configurable through the properties panel.

Acceptance Criteria

  1. A user can drag Custom Layout onto the form canvas.
  2. The component displays a configurable label.
  3. A user can drag and drop other components into the Custom Layout area.
  4. Nested components are persisted correctly in the form schema/configuration.
  5. Nested components can be selected, configured, moved, and removed as expected.
  6. The Custom Layout component can be saved, re-opened, and rendered without losing child structure.
  7. Empty state styling clearly shows that the component accepts dropped child controls.
  8. The component does not behave like a standard input field with its own direct value unless explicitly designed later.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions