Overview

The Form component builds a data entry UI for an object assigned to the formData property. The component displays and aligns label-editor pairs for each field in the bound object.

You can use the editors on the right to modify the following properties:

• labelMode: "outside" | "static" | "floating" | "hidden"
  Specifies label display mode.

• labelLocation: "top" | "left" | "right"
  Specifies whether to place outer labels above, to the left, or to the right of corresponding editors. The latter location is not demonstrated in this example.

• colCount
  Specifies the number of columns in the layout. To build an adaptive layout where the column count depends on the container width, set this property's value to "auto".

• minColWidth
  Specifies the minimum column width. Use this property when the colCount property's value is "auto".

• width
  Specifies the Form component's width.

• readOnly
  Makes the Form editors read-only.

• showColonAfterLabel
  Specifies whether the Form displays a colon after a label.

To get started with the DevExtreme Form component, refer to the following tutorial for step-by-step instructions: Getting Started with Form.