Overview

The TextArea is a UI component that enables users to enter and edit multi-line text.

View Demo

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

jQuery
HTML
JavaScript
<div id="textAreaContainer"></div>
$(function() {
    $("#textAreaContainer").dxTextArea({
        placeholder: "Type a text here..."
    });
});
Angular
HTML
TypeScript
<dx-text-area
    placeholder="Type a text here...">
</dx-text-area>
import { DxTextAreaModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
     imports: [
         // ...
         DxTextAreaModule
     ],
     // ...
 })
Vue
<template>
    <DxTextArea placeholder="Type a text here..."/>
</template>

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

import { DxTextArea } from 'devextreme-vue/text-area';

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

import { TextArea } from 'devextreme-react/text-area';

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

export default App;

The TextArea checks the entered text for spelling errors. To disable this feature, set the spellcheck property to false.

jQuery
JavaScript
$(function() {
    $("#textAreaContainer").dxTextArea({
        spellcheck: false
    });
});
Angular
HTML
TypeScript
<dx-text-area
    [spellcheck]="false">
</dx-text-area>
import { DxTextAreaModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
     imports: [
         // ...
         DxTextAreaModule
     ],
     // ...
 })
Vue
<template>
    <DxTextArea :spellcheck="false"/>
</template>

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

import { DxTextArea } from 'devextreme-vue/text-area';

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

import { TextArea } from 'devextreme-react/text-area';

class App extends React.Component {
    render() {
        return (
            <TextArea spellcheck={false}/>
        );
    }
}

export default App;

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

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

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

import { DxTextArea } from 'devextreme-vue/text-area';

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

import { TextArea } from 'devextreme-react/text-area';

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

export default App;
See Also