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.

Overview

Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.

Using this Component

  1. Confirm that you have references to Fabric's CSS on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    		
  2. Copy the HTML from one of the samples below into your page. For example:

    <label class="ms-Label">Name</label>
  3. Replace the sample HTML content with your content.

Variants

Default Label
<label class="ms-Label">Name</label>
Disabled Label
<label class="ms-Label is-disabled">Name</label>
Required Label
<label class="ms-Label is-required">Name</label>

States

State Applied to Result
.is-required .ms-Label
Marks the form element as required.
.is-disabled .ms-Label
Marks the form element as disabled.