Vue TextBox - Overview

The TextBox is a UI component that enables a user to enter and edit a single line of text.

View Demo

The following code adds a simple TextBox with a placeholder to your page.

jQuery
HTML
JavaScript
<div id="textBoxContainer" style="width:300px"></div>
$(function() {
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type a text here..."
    });
});
Angular
HTML
TypeScript
<dx-text-box
    placeholder="Type a text here...">
</dx-text-box>
import { DxTextBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule
    ],
    // ...
})
Vue
<template>
    <DxTextBox placeholder="Type a text here..."/>
</template>

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

import { DxTextBox } from 'devextreme-vue/text-box';

export default {
    components: {
        DxTextBox
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';

class App extends React.Component {
    render() {
        return (
            <TextBox
                placeholder="Type a text here..."
            />
        );
    }
}

export default App;

If an end user should not be able to edit the value in the TextBox, assign true to the readOnly property. In this case, make sure to set the value property too.

jQuery
JavaScript
$(function() {
    $("#textBoxContainer").dxTextBox({
        value: "The value that should not be edited",
        readOnly: true
    });
});
Angular
HTML
TypeScript
<dx-text-box
    value="The text that should not be edited"
    [readOnly]="true">
</dx-text-box>
import { DxTextBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule
    ],
    // ...
})
Vue
<template>
    <DxTextBox
        :read-only="true"
        value="The value that should not be edited"
    />
</template>

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

import { DxTextBox } from 'devextreme-vue/text-box';

export default {
    components: {
        DxTextBox
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';

class App extends React.Component {
    render() {
        return (
            <TextBox
                readOnly={true}
                defaultValue="The value that should not be edited"
            />
        );
    }
}

export default App;
See Also