Label Preview
Labels give a name to a component or group of components. Pair them with components like checkboxes and inputs to prompt someone to enter certain information, or with plain text to categorize information.
When using a label with a form component to gather information, use the asterisk to indicate whether the information is required before moving on.
Resources
Behavior
Disabled states
In addition to its rest state, a label can display a disabled state if the component it’s naming is also disabled. This is common for components with the label built in, like switch, checkbox, or radio groups.
In the disabled state, labels don’t need to meet color contrast requirements.
Label wrapping
If a label is longer than its container, the text will wrap onto the next line. Labels will never truncate.
Layout
Generally, the label should go above a component. However it can also appear inline where layouts allow.
Accessibility
Don’t use placeholder text in place of labels.
Content
Labels should briefly describe the information you’re looking for. Usually, a short phrase works best. In some cases, a question format is needed; but otherwise, avoid full sentences or instructional text.
Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
Don’t use end punctuation unless the label forms a question. Don’t use colons after labels.
