Row

A row is a pure layout container: it places its children side by side instead of stacking them vertically. It has no value, no expand/collapse state, and no label of its own — it exists purely to arrange other controls.

Try it

Usage

const row = pp.row();

row.slider({ label: "X", value: 0, min: -10, max: 10 });
row.slider({ label: "Y", value: 0, min: -10, max: 10 });

X and Y render on one line instead of stacked, which reads better for coordinate pairs, min/max pairs, or any small group of related controls.

Configuration

interface RowConfig {
  /** Additional CSS class. */
  className?: string;

  /**
   * Optional stable ID for diagnostics.
   *
   * Rows have no value or expanded state of their own, so an ID does not
   * appear in `PanelState`.
   */
  id?: string;
}

interface RowControl extends Control<RowConfig>, ControlContainer {}

A row does not extend BaseControlConfig — it has no label, hint, disabled, or visible of its own, since it renders no header and makes no sense to disable as a unit. Hiding an individual child still works normally through that child's own configure({ visible: false }).

Nesting

Rows are control containers, so they can hold any control, including folders, tabs, and other rows:

const row = pp.row();

const left = row.folder({ label: "Left" });
const right = row.folder({ label: "Right" });

Lifecycle

Destroying a row destroys every control placed inside it, the same as destroying a folder.