TextField

The TextFields are simple but useful. Like other Fabric React components, TextField is very versatile. First, import the component in a normal fashion:

import { TextField } from 'office-ui-fabric-react/lib/TextField'; 

Then, you can define the actual component with onChanged binding to access the changed value:

<TextField label="Text field" onChanged={this._textFieldChanged.bind(this)}/> 

In the _textFieldChanged function, we set the state to reflect the changed text:

private _textFieldChanged(newValue: string): void { 
  this.setState({textFieldValue: newValue}); 
} 

We can control disabled and required properties of TextField:

<TextField disabled={this.state.textFieldDisabled} required={true} label="Text field" onChanged={this._textFieldChanged.bind(this)}/> 

We can also control other properties, such as placeholder and icon:

 <TextField placeholder="Enter date" iconClass="ms-Icon--Calendar ms-Icon" label=&quot...