# Orientation

The Form can render labels above or to the left of their respective editors. This behavior is controlled with the `Orientation` configuration option.

To configure orientation, use either of the following settings:

* `vertical`
* `horizontal`

## Vertical Mode

By default, the Form uses `vertical` orientation mode and renders the labels above their editors.

```Razor HtmlHelper
    @(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
        .Name("formExample")
        .Orientation("vertical")
        .HtmlAttributes(new { action = "Index", method = "POST" })
        .Items(items =>
        {
            items.Add()
                .Field(f => f.FirstName)
                .Label(l => l.Text("First Name:"));
            items.Add()
                .Field(f => f.LastName)
                .Label(l => l.Text("Last Name:"));
            items.Add()
                .Field(f => f.UserName)
                .Label(l => l.Text("Username:"));
            items.Add()
                .Field(f => f.Password)
                .Label(l => l.Text("Password:"))
                .Hint("Hint: enter alphanumeric characters only.");
        })
    )
```

```Razor TagHelper
    @model Kendo.Mvc.Examples.Models.Form.UserViewModel

     <kendo-form name="formExample" orientation="vertical" form-data="@Model" action="Index" method="POST">
        <form-items>
            <form-item type="group">
                <item-label text="Registration Form">
                    <form-items>
                        <form-item field="FirstName">
                            <item-label text="FirstName" />
                        </form-item>
                        <form-item field="LastName">
                            <item-label text="Last Name:">
                        </form-item>
                        <form-item field="UserName">
                            <item-label text="Username:">
                        </form-item>
                        <form-item field="Password" hint="Hint: enter alphanumeric characters only.">
                            <item-label text="Password:">
                        </form-item>
                    </form-items>
            </form-item>
        </form-items>
    </kendo-form>
```

## Horizontal Mode

Set the `Orientation` option to `horizontal`, if you want to render labels to the left of their editors.

```Razor HtmlHelper
    @(Html.Kendo().Form<MyApplication.Models.UserViewModel>()
        .Name("formExample")
        .Orientation("horizontal")
        .HtmlAttributes(new { action = "Index", method = "POST" })
        .Items(items =>
        {
            items.Add()
                .Field(f => f.FirstName)
                .Label(l => l.Text("First Name:"));
            items.Add()
                .Field(f => f.LastName)
                .Label(l => l.Text("Last Name:"));
            items.Add()
                .Field(f => f.UserName)
                .Label(l => l.Text("Username:"));
            items.Add()
                .Field(f => f.Password)
                .Label(l => l.Text("Password:"))
                .Hint("Hint: enter alphanumeric characters only.");
        })
    )
```

````Razor TagHelper
    @model Kendo.Mvc.Examples.Models.Form.UserViewModel

     <kendo-form name="formExample" orientation="horizontal" form-data="@Model" action="Index" method="POST">
        <form-items>
            <form-item type="group">
                <item-label text="Registration Form">
                    <form-items>
                        <form-item field="FirstName">
                            <item-label text="FirstName" />
                        </form-item>
                        <form-item field="LastName">
                            <item-label text="Last Name:">
                        </form-item>
                        <form-item field="UserName">
                            <item-label text="Username:">
                        </form-item>
                        <form-item field="Password" hint="Hint: enter alphanumeric characters only.">
                            <item-label text="Password:">
                        </form-item>
                    </form-items>
            </form-item>
        </form-items>
    </kendo-form>
    ```


## See Also

* [Orientation Demo of the Form HtmlHelper for ASP.NET Core](https://demos.telerik.com/aspnet-core/form/orientation)
* [Server-Side API](/api/form)
````