Vue Form Props

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

activeStateEnabled

Specifies whether the UI component changes its visual state as a result of user interaction.

Selector: active-state-enabled

Type:

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

alignItemLabels

Specifies whether all item labels are aligned. Applies only to labels outside their editors (see labelMode).

Selector: align-item-labels

Type:

Default Value: true

alignItemLabelsInAllGroups

Specifies whether item labels in all groups are aligned. Applies only to labels outside their editors (see labelMode).

Selector: align-item-labels-in-all-groups

Type:

Default Value: true

NOTE

This property applies only to those simple items that are nested within a group item. Thus, we recommend that you do not leave any simple items ungrouped if you need a consistent alignment throughout the Form.

colCount

The count of columns in the form layout.

Selector: col-count

Type:

Number

|

Default Value: 1

Accepted Values: 'auto'

NOTE

For extra small screens, this property always equals 1 to make the UI component adaptive. To override this logic, specify the colCountByScreen property.

colCountByScreen

Specifies dependency between the screen factor and the count of columns in the form layout.

Selector: DxColCountByScreen

Type:

Default Value: undefined

The following code sample illustrates how to set this property:

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        colCountByScreen: {
            xs: 2
        }
    });
});

Angular

HTML

TypeScript

<dx-form ... >
    <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm ...>
        <DxColCountByScreen :xs="2"/>
    </DxForm>
</template>
<script>
import DxForm, { DxColCountByScreen } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxColCountByScreen
    }
}
</script>

React

App.js

import React from 'react';
import Form, { ColCountByScreen } from 'devextreme-react/form';

const App = () => {
    return (
        <Form ...>
            <ColCountByScreen xs={2} />
        </Form>
    );
};

export default App;

customizeItem

Specifies a function that customizes a form item after it has been created.

Selector: customize-item

Type:

Function parameters:

item:

|

|

|

|

The item's object.

If you did not define form items using the items property, the Form UI component creates them automatically according to the structure of an object passed to the formData property. The customizeItem property enables you to modify properties of each generated item before this item is rendered. Each generated item passed to this function as an argument has a Simple Item structure.

If the items property contains definition for form items, you usually do not need to pass a function to the customizeItem property because you can customize items before passing them to the items property. However, if you assign a function to this property, it will be called for each item. In this case, an item can have structure corresponding to one of the item types.

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: DxElementAttr

Type:

Default Value: {}

jQuery

$(function(){
    $("#formContainer").dxForm({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-form ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm ...
        :element-attr="formAttributes">
    </DxForm>
</template>

<script>
import DxForm from 'devextreme-vue/form';

export default {
    components: {
        DxForm
    },
    data() {
        return {
            formAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Form from 'devextreme-react/form';

class App extends React.Component {
    formAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Form ...
                elementAttr={this.formAttributes}>
            </Form>
        );
    }
}
export default App;

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Selector: focus-state-enabled

Type:

Default Value: false

formData

Provides the Form's data. Gets updated every time form fields change.

Selector: form-data

Type: any

Default Value: {}

Raised Events: onFieldDataChanged

height

Specifies the UI component's height.

Type:

|

|

Return Value:

|

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".
Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

Default Value: undefined

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

Selector: hover-state-enabled

Type:

Overview Demo Customize Fields at Runtime Demo

Default Value: false

items

Holds an array of form items.

Selector: DxItem

Type:

Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>

Default Value: undefined

labelLocation

Specifies the location of a label against the editor. Applies only to labels outside their editors (see labelMode).

Selector: label-location

Type:

Default Value: 'left', 'top' (Material)

Accepted Values: 'left' | 'right' | 'top'

labelMode

Specifies a display mode for item labels.

Selector: label-mode

Type:

Default Value: 'outside'

Accepted Values: 'static' | 'floating' | 'hidden' | 'outside'

This property can have one of the following values:

labelMode	Description	Illustration
"static"	The label is displayed above the input field.
"floating"	The label is used as a placeholder, but when the editor gets focus, the label moves to the position above the input field.
"hidden"	The label is hidden.
"outside"	The label is displayed outside the editor, and its position depends on the following properties: labelLocation items[].label.location alignItemLabels alignItemLabelsInAllGroups items[].label.alignment

This property specifies a display mode for all item labels. If you want to override the mode for an individual label, specify the labelMode property within editorOptions.

NOTE

Please review the following notes:

The following editors do not support "static" and "floating" modes and will default to "outside" mode:
- "dxCalendar"
- "dxCheckBox"
- "dxHtmlEditor"
- "dxRadioGroup"
- "dxRangeSlider"
- "dxSlider"
- "dxSwitch"
If autofill is enabled in the browser, we do not recommend that you use "floating" mode. The autofill values will overlap the label when it is displayed as a placeholder. Use "static" mode instead.

minColWidth

The minimum column width used for calculating column count in the form layout. Applies only if colCount property is "auto".

Selector: min-col-width

Type:

Number

Default Value: 200

NOTE

The actual column width equals the UI component width divided by the column count.

onContentReady

A function that is executed when the UI component is rendered and each time the component is repainted.

Selector: @content-ready

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Form

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

any

Model data. Available only when using Knockout.

Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Selector: @disposing

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Form

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

any

Model data. Available only if you use Knockout.

Default Value: null

onEditorEnterKey

A function that is executed when the Enter key has been pressed while an editor is focused.

Selector: @editor-enter-key

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Form	The UI component's instance.
dataField	String	The path to the formData object field associated with the current editor.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.

Default Value: null

IMPORTANT

This function is executed only if the editor raises the enterKey event. See the Events section in the editor's API reference for the list of events the editor can raise. If the enterKey event is absent from the list, but you need to handle the Enter key press, use another editor.

onFieldDataChanged

A function that is executed when the value of a formData object field is changed.

Selector: @field-data-changed

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Form	The UI component's instance.
dataField	String	The path to the formData object field whose value has been changed.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.
value	Object	The field's new value.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Form

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

jQuery

Get a UI Component Instance

Angular

Get a UI Component Instance

Vue

Get a UI Component Instance

React

Get a UI Component Instance

onOptionChanged

A function that is executed after a UI component property is changed.

Selector: @option-changed

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
model	any	Model data. Available only if you use Knockout.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Form	The UI component's instance.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value	any	The modified property's new value.
previousValue	any	The UI component's previous value.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#formContainer").dxForm({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-form ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-form>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxFormModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxFormModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxForm ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxForm from 'devextreme-vue/form'; 

export default { 
    components: { 
        DxForm
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Form from 'devextreme-react/form'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Form ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

optionalMark

The text displayed for optional fields. Applies only if showOptionalMark is true.

Selector: optional-mark

Type:

Default Value: 'optional'

NOTE

In "static" or "floating" labelMode, form items use the optionalMark property value as help text if the helpText property is not specified.

readOnly

Specifies whether all editors on the form are read-only. Applies only to non-templated items.

Selector: read-only

Type:

Default Value: false

requiredMark

The text displayed for required fields.

Selector: required-mark

Type:

Default Value: '*'

requiredMessage

Specifies the message that is shown for end-users if a required field value is not specified.

Selector: required-message

Type:

Default Value: '{0} is required'

rtlEnabled

Switches the UI component to a right-to-left representation.

Selector: rtl-enabled

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

screenByWidth

Specifies a function that categorizes screens by their width.

Selector: screen-by-width

Type:

Default Value: null

The UI component uses the following size qualifiers to categorize screens by width:

Size Qualifier	Description
xs	Stands for "extra small". Screens with width less than 768 pixels.
sm	Stands for "small". Screens with width between 768 and 992 pixels.
md	Stands for "medium". Screens with width between 992 and 1200 pixels.
lg	Stands for "large". Screens with width more than 1200 pixels.

Implement the screenByWidth function to change the relation between a size qualifier and screen width. This function accepts the screen width and should return a size qualifier. The following code shows the function's default implementation that you can customize:

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        screenByWidth: function(width) {
            if (width < 768) return "xs";
            if (width < 992) return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    });
});

Angular

TypeScript

HTML

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    getSizeQualifier(width) {
        if (width < 768)  return "xs";
        if (width < 992)  return "sm";
        if (width < 1200) return "md";
        return "lg";
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

<dx-form ...
    [screenByWidth]="getSizeQualifier">
</dx-form>

Vue

App.vue

<template>
    <DxForm ...
        :screen-by-width="getSizeQualifier">
        <!-- ... -->
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxForm,
        // ...
    },
    // ...
    methods: {
        getSizeQualifier(width) {
            if (width < 768)  return "xs";
            if (width < 992)  return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    }
}
</script>

React

App.js

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

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

const getSizeQualifier = (width) => {
    if (width < 768)  return "xs";
    if (width < 992)  return "sm";
    if (width < 1200) return "md";
    return "lg";
};

export default function App() {
    return (
        <Form ...
            screenByWidth={getSizeQualifier}>
            {/* ... */}
        </Form>
    );
}

scrollingEnabled

A Boolean value specifying whether to enable or disable form scrolling.

Selector: scrolling-enabled

Type:

Default Value: false

showColonAfterLabel

Specifies whether a colon is displayed at the end of form labels. Applies only to labels outside their editors (see labelMode).

Selector: show-colon-after-label

Type:

Default Value: true, false (Material)

showOptionalMark

Specifies whether or not the optional mark is displayed for optional fields.

Selector: show-optional-mark

Type:

Default Value: false

showRequiredMark

Specifies whether or not the required mark is displayed for required fields.

Selector: show-required-mark

Type:

Default Value: true

showValidationSummary

Specifies whether or not the total validation summary is displayed on the form.

Selector: show-validation-summary

Type:

Default Value: false

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Selector: tab-index

Type:

Number

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

validationGroup

Gives a name to the internal validation group.

Selector: validation-group

Type:

Default Value: undefined

In some cases, the Form editors should be validated by the Button UI component. By default, these editors are collected in an unnamed validation group, what makes it impossible for the Button to validate them. In this case, give this validation group a name using the validationGroup property of the Form UI component. Also, pass the same name to the validationGroup property of the Button UI component.

jQuery

$(function () {
    $("#formContainer").dxForm({
        // ...
        validationGroup: "groupName"
    });

    $("#buttonContainer").dxButton({
        // ...
        validationGroup: "groupName",
        onClick: function (e) {
            e.validationGroup.validate();
        }
    });
})

visible

Specifies whether the UI component is visible.

Type:

Default Value: true

width

Specifies the UI component's width.

Type:

|

|

Return Value:

|

The UI component's width.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".
Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.