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