Skip to main content

Label

The label component is an MWF replacement for the HTML label element. Unlike the HTML element, the label component is not restricted for use only in forms. It can be used alone or grouped with other related components. Some components or modules have the label component built-in, but most do not.

Example

Label example
Label on a default theme

Best practices

Use a label to inform the user of information about one or more physically co-located components. For example, use a label to tell the use what they should enter into an adjacent input component. You can also label a group of related components. It is possible use a label to display instructional text near a group of related components, but there are better choices such as a caption or paragraph.

Do

  • Use sentence case (i.e. "Last name"), but avoid punctuation such as colons.
  • Label text should be short and succinct, not full sentences.
  • When labeling components, write the label as a noun or a concise noun phrase.
  • When you need instructional text near a group of controls, consider using a caption component instead.

Don’t

  • Do not use a label for instructional text, they are only intended for identification purposes.
  • Do not use full sentences or internal punctuation such as colons. Using commas to separate list items is an exception to this rule.

Also known as

Form label
Identifier

Related

Caption
Paragraph

Accessibility

  • Form: When using label inside a form element, input types can be either wrapped by a label element or the label'sfor” attribute may be used to associate the form element with its label.

Options

  • Base element: You can use several HTML elements as an MWF label. These include:
    • div
    • label
    • legend
  • Datatype: String.

Specifications

  • Labels cannot exceed one line of text.

Development

  • Schema definition: The label schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default label

Label
<div class="c-label">Label</div>