# Responsive Design

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`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/responsiveformbreakpoint) interface.

The following props support responsive arrays:

* **`FormElement` [`cols`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops#cols) and [`gutters`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops#gutters)**—Controls the number of columns and spacing of the main form grid at each breakpoint.
* **`FormFieldSet` [`cols`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops#cols), [`colSpan`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops#colspan), and [`gutters`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops#gutters)**—Controls the internal columns, outer span, and spacing of a fieldset at each breakpoint.
* **`Field` [`colSpan`](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/fieldprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/responsive/source.txt)

## Suggested Links

* [Layout](https://www.telerik.com/kendo-vue-ui-develop/components/form/layout)
* [API Reference of the FormElement](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formelementprops)
* [API Reference of the FormFieldSet](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/formfieldsetprops)
* [API Reference of the Field](https://www.telerik.com/kendo-vue-ui-develop/components/form/api/fieldprops)