Office UI Fabric JS
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.

Also available in Fabric React

Using this Component

  1. 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>

  2. 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>

  3. 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>

  4. 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>
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>
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>
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>
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>

States

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