Label component in Office UI Fabric
Use Labels to name or title a component or group of components. When paired with another component or group of components, Labels should be in close proximity to the related components or groups. Some components have predefined labels, such as a Dropdown or Toggle.
Example: Label in a task pane

Best Practices
| Do | Don't |
|---|---|
| Use sentence casing, for example “First name.” | Don’t use title casing, for example “First Name.” |
| Be short and concise. | Don’t use full sentences or complex punctuation, such as colons or semicolons. |
| When adding a Label to components, use a noun or short noun phrase as the Label text. |
Variants
| Variation | Description | Example |
|---|---|---|
| Default label | Use for standard labels. | ![]() |
| Disabled label | Use when the related component is disabled. | ![]() |
| Required label | Use when the related component is required. | ![]() |
Implementation
For details, see Label and Getting started with Fabric React code sample.


