Fabric JS

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

  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