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
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. |  |
| Disabled TextField | Use when the Textfield is disabled. |  |
| Required TextField | Use when the Textfield input is required. |  |
| TextField with a placeholder | Use when placeholder text is needed. |  |
| TextField with multiple lines | Use when many lines of text are needed. |  |
Implementation
For details, see TextField and Getting started with Fabric React code sample.