Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

TextField

Overview

The TextField component enables a user to type text into an app. 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.

Using this Component

Confirm that you have references to Fabric's CSS and JavaScript on your page:

					<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>
		
	

Copy the HTML from one of the samples below into your page. For example:

<div class="ms-TextField">
  <label class="ms-Label">Name</label>
  <input class="ms-TextField-field" type="text" value="" placeholder="">
</div>

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all TextField components on the page:

<script type="text/javascript">
  var TextFieldElements = document.querySelectorAll(".ms-TextField");
  for (var i = 0; i < TextFieldElements.length; i++) {
    new fabric['TextField'](TextFieldElements[i]);
  }
</script>

Replace the sample HTML content with your content.

Variants

Default TextField

<div class="ms-TextField">
  <label class="ms-Label">Name</label>
  <input class="ms-TextField-field" type="text" value="" placeholder="">
</div>

<script type="text/javascript">
  var TextFieldElements = document.querySelectorAll(".ms-TextField");
  for (var i = 0; i < TextFieldElements.length; i++) {
    new fabric['TextField'](TextFieldElements[i]);
  }
</script>

Name

Multiline TextField

<div class="ms-TextField ms-TextField--multiline">
  <label class="ms-Label">Name</label>
  <textarea class="ms-TextField-field"></textarea>
</div>

<script type="text/javascript">
  var TextFieldElements = document.querySelectorAll(".ms-TextField");
  for (var i = 0; i < TextFieldElements.length; i++) {
    new fabric['TextField'](TextFieldElements[i]);
  }
</script>

Name

Placeholder TextField

<div class="ms-TextField ms-TextField--placeholder">
  <label class="ms-Label">Given name</label>
  <input class="ms-TextField-field" type="text" value="" placeholder="">
</div>

<script type="text/javascript">
  var TextFieldElements = document.querySelectorAll(".ms-TextField");
  for (var i = 0; i < TextFieldElements.length; i++) {
    new fabric['TextField'](TextFieldElements[i]);
  }
</script>

Given name

Underlined TextField

<div class="ms-TextField ms-TextField--underlined">
  <label class="ms-Label">Name</label>
  <input class="ms-TextField-field" type="text" value="" placeholder="">
</div>

<script type="text/javascript">
  var TextFieldElements = document.querySelectorAll(".ms-TextField");
  for (var i = 0; i < TextFieldElements.length; i++) {
    new fabric['TextField'](TextFieldElements[i]);
  }
</script>

Name

Disabled TextField

<div class="ms-TextField is-disabled">
  <label class="ms-Label">Name</label>
  <input class="ms-TextField-field" type="text" value="" placeholder="" disabled>
</div>

<script type="text/javascript">
  var TextFieldElements = document.querySelectorAll(".ms-TextField");
  for (var i = 0; i < TextFieldElements.length; i++) {
    new fabric['TextField'](TextFieldElements[i]);
  }
</script>

Name

States

State	Applied to	Result
.is-disabled	.ms-TextField	Disables user input on TextField