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.
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 ], // ... })
React
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.
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 ], // ... })
React
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;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.