Vue Form - SimpleItem.label

Specifies properties for the form item label.

Selector: DxLabel
Type:

Object

Default Value: undefined

View Demo

See Also

alignment

Specifies the label's horizontal alignment. Applies only to labels outside their editors (see labelMode).

Type:

HorizontalAlignment

Default Value: 'left'

See Also

location

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

Type:

LabelLocation

Default Value: 'left'

NOTE
This property has higher priority than the labelLocation property of the form.
See Also

showColon

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

Selector: show-colon
Type:

Boolean

Default Value: from showColonAfterLabel

NOTE
This property has higher priority than the showColonAfterLabel property of the form.

template

A template that can be used to replace the label with custom content. Applies only to labels outside their editors (see labelMode).

Type:

template

Template Data:
Name Type Description
component

Form

The Form instance.
dataField

String

The item's dataField.
editorOptions any

The item editor's configuration.
editorType

String

The editor's type.
name

String

The item's name.
text

String

The label's text.

View Demo

The following code adds a custom label to the SimpleItem:

jQuery
index.js
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            label: {
                template(data) {
                    return `Custom ${data.text}`;
                }
            }
        }]
    });
});
Angular
app.component.html
<dx-form ... >
    <dxi-item ... >
        <dxo-label template="customLabel"></dxo-label>
    </dxi-item>
    <div *dxTemplate="let data of 'customLabel'">
        <span>Custom {{ data.text }}</span>
    </div>
</dx-form>
Vue
App.vue
<template>
    <DxForm ...>
        <DxSimpleItem ...>
            <DxLabel template="customLabel"/>
        </DxSimpleItem>
        <template #customLabel="{ data }">
            <span>
                Custom {{ data.text }}
            </span>
        </template>
    </DxForm>
</template>

<script>
// ...
</script>
React
App.js

const customItem = (data) => {
    return `Custom ${data.text}`;
}

function App() {
    return (
        <Form ...>
            <SimpleItem ...>
                <Label render={customItem} />
            </SimpleItem>
        </Form>
    );
};

export default App;

text

Specifies the label text.

Type:

String

Default Value: undefined

See Also

visible

Controls the visibility of the label outside the editor.

Type:

Boolean

Default Value: true

This property defaults to true in the following cases:

  • The labelMode is "outside".
  • The editor does not support embedded labels and therefore does not support "static" and "floating" label modes. Refer to the labelMode article for a list of these editors.

In other cases, the property defaults to false.