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