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

Used to indicate a single choice from multiple options.

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-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
      <div class="ms-ChoiceFieldGroup-title">
        <label class="ms-Label is-required">Unselected</label>
      </div>
      <ul class="ms-ChoiceFieldGroup-list">
        <li class="ms-RadioButton">
          <input tabindex="-1" type="radio" class="ms-RadioButton-input">
          <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
            <span class="ms-Label">Option 1</span> 
          </label>
        </li>
        <li class="ms-RadioButton">
          <input tabindex="-1" type="radio" class="ms-RadioButton-input">
          <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
            <span class="ms-Label">Option 2</span> 
          </label>
        </li>
        <li class="ms-RadioButton">
          <input tabindex="-1" type="radio" class="ms-RadioButton-input">
          <label role="radio" class="ms-RadioButton-field is-disabled" tabindex="0" aria-checked="false" name="choicefieldgroup" aria-disabled="true">
            <span class="ms-Label">Option 3</span> 
          </label>
        </li>
        <li class="ms-RadioButton">
          <input tabindex="-1" type="radio" class="ms-RadioButton-input">
          <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
            <span class="ms-Label">Option 4</span> 
          </label>
        </li>
      </ul>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all ChoiceFieldGroup components on the page:

    <script type="text/javascript">
      var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
      for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
        new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default ChoiceFieldGroup
<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
  <div class="ms-ChoiceFieldGroup-title">
    <label class="ms-Label is-required">Unselected</label>
  </div>
  <ul class="ms-ChoiceFieldGroup-list">
    <li class="ms-RadioButton">
      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
        <span class="ms-Label">Option 1</span> 
      </label>
    </li>
    <li class="ms-RadioButton">
      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
        <span class="ms-Label">Option 2</span> 
      </label>
    </li>
    <li class="ms-RadioButton">
      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
      <label role="radio" class="ms-RadioButton-field is-disabled" tabindex="0" aria-checked="false" name="choicefieldgroup" aria-disabled="true">
        <span class="ms-Label">Option 3</span> 
      </label>
    </li>
    <li class="ms-RadioButton">
      <input tabindex="-1" type="radio" class="ms-RadioButton-input">
      <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
        <span class="ms-Label">Option 4</span> 
      </label>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
  for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
    new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
  }
</script>

Methods

Name Parameters Description
removeListeners()

None

Remove all event listeners from component