TextField component in Office UI Fabric

TextFields enable users to type text. It's typically used to capture a single line of text but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.

Example: TextField in a task pane

An image showing the Textfield

Best Practices

Do Don't
Use TextFields to accept data input on a form or page. Don’t use TextFields to render basic copy as part of a body element of a page.
Label TextFields with a helpful names. Don’t use TextFields for date or time entry. Instead, use a Datetime picker.
Use concise placeholder text to specify what content should be entered. Don’t use TextFields if you can predefine valid input options. Instead, use a Dropdown.
Provide all appropriate states for the TextField (static, hover, focus, engaged, unavailable, error).
Clearly mark required and optional fields.
Whenever possible, format TextFields according to the expected data format. For example, when capturing a 10-digit phone number, use 3 separate fields to store the different parts of the phone number.

Variants

Variation Description Example
Default TextField Use as the default Textfield. Default TextField image
Disabled TextField Use when the Textfield is disabled. Disabled TextField image
Required TextField Use when the Textfield input is required. Required TextField image
TextField with a placeholder Use when placeholder text is needed. TextField with a placeholder image
TextField with multiple lines Use when many lines of text are needed. TextField with a placeholder image

Implementation

For details, see TextField and Getting started with Fabric React code sample.

Additional resources