A newer version of this page is available.

DevExtreme React - Overview

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

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


import React from 'react';
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 option. In this case, make sure to set the value option too.


import React from 'react';
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;

DevExtreme React - Overview

See Also