The DevExpress Blazor Form Layout component allows you to construct responsive and auto-aligned edit forms.

The component uses a responsive grid system based on the CSS flexible box layout to render its items. Each layout item can occupy between 1 and 12 columns. This value can be defined separately for six different screen resolution types as listed below:

1. ColSpanXxl: Screens that are 1400px or wider.
2. ColSpanXl: Screens that are 1200px or wider.
3. ColSpanLg: Screens that are 992px or wider.
4. ColSpanMd: Screens that are 768px or wider.
5. ColSpanSm: Screens that are 576px or wider.
6. ColSpanXs: Screens that are less than 576px.

Form Layout items support different size modes. To specify component size in code, use the SizeMode property. To apply different size modes in the demo, use the drop-down list in the demo card's header.

In this demo, the CaptionTemplate property specifies custom content for the Email item's caption. The template contains a button that when clicked, displays clarification information.

The CaptionPosition property defines where to display caption labels. In this demo, the CaptionPosition property is set to CaptionPosition.Vertical to stack captions above associated editors.

All layout items are rendered in a single container. An item moves to the next row if there is not enough space in the current row. You can also use an item's BeginRow property to explicitly indicate that it should be placed onto a new row.

A layout group (DxFormLayoutGroup) is a container for layout items (DxFormLayoutItem) and other layout groups. Users can expand and collapse groups. Use the ExpandButtonDisplayMode property to position the group's expand button. You can apply templates to customize the group's content and appearance: HeaderTemplate, CaptionTemplate, and HeaderContentTemplate.

The main group properties are:

• AnimationType — Specifies the animation type.
• A set of ColSpanXX properties — Specifies the width of a group.
• Caption — Specifies the group caption.
• Enabled — Specifies whether auto-generated editors in groups are enabled.
• Expanded — Specifies whether the group is expanded.
• ReadOnly — Specifies whether the group activates read-only mode for all nested auto-generated editors.

In this demo, the template adds the Unemployed checkbox to a group header's content. Click this checkbox to disable group items.

The Form Layout component allows you to group layout items and groups into tabbed containers.

The main tab-related properties are:

• A set of ColSpanXX properties — Specifies the width of a tab.
• ActiveTabIndex — Specifies the index of the selected tabbed layout item.
• RenderMode — Specifies how the component loads tab content.
• ScrollMode — Specifies how users navigate between tabs when they do not fit the container's width.
• Caption — Specifies the Form Layout tab caption.
• Enabled — Specifies whether auto-generated editors in tabs are enabled.
• ReadOnly — Specifies whether the tab activates read-only mode for all nested auto-generated editors.
• Visible — Specifies whether the tab is visible.

In this demo, the Form Layout component has two tabs. The Work Information tab is active.

You can use the Form Layout component to display and edit data from an external source. In this demo, such data source is assigned to the Data property. Form Layout items must be declared and bound to data source fields using the Field property. Each item automatically displays a DevExpress data editor suitable for the target data type.

You can override the default behavior and assign a custom editor to a layout item. To see an example, review the code for the Position item below.