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 drop-down or toggle.

Example: Label in a task pane

An image showing the label

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.


Variation Description Example
Default label Use for standard labels. Default Label image
Disabled label Use when the related component is disabled. Disabled Label image
Required label Use when the related component is required. Required Label image


For details, see Label and Getting started with Fabric React code sample.

See also