Location and Alignment

Align Labels Relatively to Editors

The Form widget displays labels on the left side of their editors and aligns them to the left. Use the labelLocation option to relocate all labels or the label.location option to relocate individual labels. To align labels horizontally, set the label.alignment option.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            phone: "+1(360)684-1334"
        },
        labelLocation: "top", // or "left" | "right"
        items: ["firstName", "lastName", { 
            dataField: "phone",
            label: { 
                location: "left",
                alignment: "right" // or "left" | "center"
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    labelLocation="top"> <!-- or "left" | "right" -->
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="phone">
        <dxo-label
            location="left"
            alignment="right"> <!-- or "left" | "center" -->
        </dxo-label>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        phone: "+1(360)684-1334"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        label-location="top"> <!-- or "left" | "right" -->
        <DxSimpleItem data-field="firstName" />
        <DxSimpleItem data-field="lastName" />
        <DxSimpleItem data-field="phone">
            <DxLabel
                location="left"
                alignment="right" /> <!-- or "left" | "center" -->
        </DxSimpleItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxLabel } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(360)684-1334'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxLabel
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, Label } from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    phone: '+1(360)684-1334'
};

class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                labelLocation="top"> { /* or "left" | "right" */ }
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <SimpleItem dataField="phone">
                    <Label
                        location="left"
                        alignment="right" /> { /* or "left" | "right" */ }
                </SimpleItem>
            </Form>
        );
    }
}

export default App;

A label placed on the left or right side of the editor is centered vertically in most cases. The labels of the editors that occupy much screen space like the Calendar, TextArea, and RadioGroup are aligned at the top, but you can center them using the following code:

CSS
.dx-label-h-align {
    align-items: center;
}

Align Editors Relatively to Each Other

By default, the widget aligns all editors of all simple items in straight columns. To disable alignment, assign false to:

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            hireDate: new Date(2012, 4, 13),
            city: "Los Angeles",
            position: "CEO",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        alignItemLabels: false,
        alignItemLabelsInAllGroups: false,
        items: ["firstName", "lastName", {
            itemType: "group",
            caption: "Contacts",
            items: ["phone", "email"]
        }, {
            itemType: "group",
            caption: "Misc Data",
            items: ["position", "city"]
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [alignItemLabels]="false"
    [alignItemLabelsInAllGroups]="false">
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item itemType="group"
        caption="Contacts"
        [items]="['phone', 'email']">
    </dxi-item>
    <dxi-item itemType="group"
        caption="Misc Data"
        [items]="['position', 'city']">
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        hireDate: new Date(2012, 4, 13),
        city: "Los Angeles",
        position: "CEO",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxForm
        :form-data="employee"
        :align-item-labels="false"
        :align-item-labels-in-all-groups="false">
        <DxSimpleItem data-field="firstName" />
        <DxSimpleItem data-field="lastName" />
        <DxGroupItem caption="Contacts">
            <DxSimpleItem data-field="phone" />
            <DxSimpleItem data-field="email" />
        </DxGroupItem>
        <DxGroupItem caption="Misc Data">
            <DxSimpleItem data-field="position" />
            <DxSimpleItem data-field="city" />                
        </DxGroupItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxSimpleItem, DxGroupItem } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    position: 'CEO',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxSimpleItem, DxGroupItem
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Form, SimpleItem, GroupItem } from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    hireDate: new Date(2012, 4, 13),
    city: 'Los Angeles',
    position: 'CEO',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                alignItemLabels={false}
                alignItemLabelsInAllGroups={false}>
                <SimpleItem dataField="firstName" />
                <SimpleItem dataField="lastName" />
                <GroupItem caption="Contacts">
                    <SimpleItem dataField="phone" />
                    <SimpleItem dataField="email" />
                </GroupItem>
                <GroupItem caption="Misc Data">
                    <SimpleItem dataField="position" />
                    <SimpleItem dataField="city" />
                </GroupItem>
            </Form>
        );
    }
}

export default App;
See Also