Responsive Design

Updated on Apr 22, 2026

The Form component and its internal elements support responsive web design by adapting their layout based on the available screen size.

To create a responsive layout, you can pass arrays of values to certain props. Each value in the array corresponds to a specific breakpoint, defined using the ResponsiveFormBreakPoint interface.

The following props support responsive arrays:

• FormElement cols and gutters—Controls the number of columns and spacing of the main form grid at each breakpoint.
• FormFieldSet cols, colSpan, and gutters—Controls the internal columns, outer span, and spacing of a fieldset at each breakpoint.
• Field colSpan—Controls how many columns each field spans at each breakpoint.

Each breakpoint object has a minWidth and an optional maxWidth (in pixels) that define when the value applies.

The following example demonstrates how the Form adapts to different screen sizes. Resize the browser window to observe the layout changing.

Change Theme

Theme

Loading ...

Suggested Links

• Layout
• API Reference of the FormElement
• API Reference of the FormFieldSet
• API Reference of the Field