Add components from the palette

A component is one piece of the form: a text field, a button, or a container. The Components tab is the library. Drag a component onto the canvas, or double-click it. Then set Label and Key on the right.

Search the palette

  1. Open Components.
  2. Type in Search… (placeholder text matches the box).
  3. Categories such as Inputs and Layout filter to matching names.
  4. If nothing matches, the palette shows a Not found message. Clear Search… or try another term.
Components palette filtered with Search.Components palette filtered with Search. Components palette highlighted.Components palette highlighted.
  1. Find a control (for example Text field).
  2. Drag it onto the canvas or into a highlighted drop zone on a container.
  3. Select the new field and set Label and Key on Main.

Double-click to insert

Canvas after adding Full name and Email address fields.Canvas after adding Full name and Email address fields.
  1. Select a container on the canvas.
  2. Double-click a component in the palette.
  3. Designer inserts it inside the selection (or after the selected sibling).

Components modal

Add button on the component toolbar with Before and After options.Add button on the component toolbar with Before and After options.
  1. Select a component on the canvas to show the floating toolbar.
  2. Hover the + button to open Before and After.
  3. Choose Before or After to pick where the new control goes.
Click to add control modal with the full component picker.Click to add control modal with the full component picker.
  1. The Click to add control modal opens with search and categories.
  2. Click a component to insert it in the chosen position.

Some layouts use this modal instead of dragging from the left palette. Search and categories work the same way.

Summary

Search… narrows the palette. Drag or double-click to place components, then configure them on Main. Use Tree to verify where new items landed.

See also