Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

Form label

About

What does it do?

  • Tells users what a field is for.

When to use it?

  • When you are requesting multiple pieces of information to answer the same question. For example, the day, month and year of a date.
  • The label must appear directly above the field.

When not to use it?

  • Do not use this component to ask more questions within a question - instead, ask a new question.
  • When you're giving extra information and hints to help the user answer a question.


HTML markup
<label class="wmnds-fe-label" for="genericInput">Form label</label>

Nunjucks markup
{% from "wmnds/components/form-elements/form-label/_form-label.njk" import wmndsFormLabel %}

{{
   wmndsFormLabel({
      contentText: "Form label",
      contentHTML: null,
      for: "genericInput",
      classes: null
   })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Text to use within the label. If contentHTML is provided this is not required and will be ignored.
contentHTMLstringRequired. HTML to use within the label. If contentText is provided, this is not required.
forstringRequired. The value of the for attribute, the id of the input the label is associated with.
classesstringClasses to add to the label tag.