Vue TextBox - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

TextBox is a component that allows users to enter and edit a single line of text.

This tutorial shows how to add a TextBox to your application and configure its core features.

Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create a TextBox

jQuery

Add DevExtreme to your jQuery application and use the following code to create a TextBox:

index.js
index.html
$(function() {
    $("#textbox").dxTextBox({ });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="textbox"></div>
    </body>
</html>
Angular

Add DevExtreme to your Angular application and use the following code to create a TextBox:

app.component.html
app.component.ts
app.module.ts
<dx-text-box></dx-text-box>
import { Component } from '@angular/core';

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

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

import { DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTextBoxModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

Add DevExtreme to your Vue application and use the following code to create a TextBox:

App.vue
<template>
    <DxTextBox />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTextBox } from 'devextreme-vue/text-box';

export default {
    components: {
        DxTextBox
    }
}
</script>
React

Add DevExtreme to your React application and use the following code to create a TextBox:

App.js
import React from 'react';

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

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

function App() {
    return (
        <TextBox />
    );
}

export default App;

Configure the Input Mode

Specify the TextBox mode property to allow users to type in a specific text type. Set this property to "email", "tel", or "url" to specify the set of keyboard buttons that a mobile device shows when the UI component is focused. When you set the mode property to "search", the TextBox contains the Clear button, which empties its contents. When you set the mode property to "password", the TextBox hides input characters behind asterisks.

jQuery
index.js
$(function() {
    $("#textbox").dxTextBox({ 
        mode: "url"
    });
});
Angular
app.component.html
<dx-text-box
    mode="url"
>
</dx-text-box>
Vue
App.vue
<template>
    <DxTextBox
        mode="url"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...
function App() {
    return (
        <TextBox 
            mode="url"
        />
    );
}

export default App;

Specify a Label or Placeholder

Use the placeholder property to give users a hint about what they should type in the TextBox. You can also use the label property for this purpose. If you specify the label property, set the labelMode property to one of the following values:

  • "static"
    The component displays the label above the input field.

  • "floating"
    The component uses the label as a placeholder, but when the editor gets focus, the label moves to the position above the input field.

  • "hidden"
    The label is hidden.

In this tutorial, the component also uses label as a placeholder, because the labelMode property is set to "floating".

jQuery
index.js
$(function() {
    $("#textbox").dxTextBox({ 
        // ...
        label: "Link",
        labelMode: "floating"
    });
});
Angular
app.component.html
<dx-text-box ...
    label="Link"
    labelMode="floating"
>
</dx-text-box>
Vue
App.vue
<template>
    <DxTextBox ...
        label="Link"
        label-mode="floating"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...
function App() {
    return (
        <TextBox ...
            label="Link"
            labelMode="floating"
        />
    );
}

export default App;

Limit the Text Length

Assign an integer number to the maxLength property to limit the text length.

jQuery
index.js
$(function() {
    $("#textbox").dxTextBox({ 
        // ...
        maxLength: 20
    });
});
Angular
app.component.html
<dx-text-box ...
    [maxLength]="20"
>
</dx-text-box>
Vue
App.vue
<template>
    <DxTextBox ...
        :max-length="20"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...
function App() {
    return (
        <TextBox ...
            maxLength={20}
        />
    );
}

export default App;

Place Buttons Inside a TextBox

Specify the showClearButton property to add a Clear button that empties the TextBox on click. You can also add custom buttons to the input text field. Declare them in the buttons[] array. To see an example, refer to this demo: Custom Text Editor Buttons.

jQuery
index.js
$(function() {
    $("#textbox").dxTextBox({ 
        // ...
        showClearButton: true
    });
});
Angular
app.component.html
<dx-text-box ...
    [showClearButton]="true"
>
</dx-text-box>
Vue
App.vue
<template>
    <DxTextBox ...
        :show-clear-button="true"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...
function App() {
    return (
        <TextBox ...
            showClearButton={true}
        />
    );
}

export default App;

Handle the Keyboard Events

The TextBox raises three keyboard events: keyDown, keyUp, and enterKey. Handle these events to access the original keyboard events.

In this tutorial, users can see the TextBox value in the browser console after they press the Enter key.

jQuery
index.js
$(function() {
    $("#textbox").dxTextBox({ 
        // ...
        onEnterKey: function(e) {
            console.log(e.component.option("value"));
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-text-box ...
    [(value)]="value"
    (onEnterKey)="onEnterKey()"
>
</dx-text-box>
// ...
export class AppComponent {
    value: string = "";
    onEnterKey() {
        console.log(this.value);
    }
}
Vue
App.vue
<template>
    <DxTextBox 
        v-model:value="value"
        @enter-key="onEnterKey($event)"
    />
</template>

<script>
// ...

export default {
    // ...
    data() {
        return {
            value: ""
        }
    },
    methods: {
        onEnterKey() {
            console.log(this.value);
        }
    }
}
</script>
React
App.js
import React, { useState, useCallback } from 'react';
// ...

function App() {
    const [value, setValue] = useState("");
    const onValueChange = useCallback((v) => {
        setValue(v)
    }, []);
    const onEnterKey = useCallback(() => {
        console.log(value)
    }, [value]);
    return (
        <TextBox ...
            value={value}
            valueChangeEvent="input"
            onValueChange={onValueChange}
            onEnterKey={onEnterKey}
        />
    );
}

export default App;