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

Text Input

About

What does it do?

  • Allows users to enter text.

When to use it?

  • When user needs to enter short amount of text, e.g. name, email.

When not to use it?

  • When user needs to add a lot of text that might go over multiple lines
  • Use fixed width inputs for content that has known length, e.g. postcode.


HTML markup
<div class="wmnds-fe-group">
  <label class="wmnds-fe-label" for="input">Form label</label>
  <input class="wmnds-fe-input" id="input" name="input" type="text" value="" />
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/text-input/_text-input.njk" import wmndsTextInput %}

{{
   wmndsTextInput({
      id: "example-input",
      name: "example-input",
      type: "text",
      required: true,
      classes: null,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Custom error message for this example input",
         contentHTML: null, 
         classes: null
      },
      disabled: false,
      maxLength: "200",
      placeholder: "input placeholder...",
      value: "",
      label: {
         contentText: "input label",
         contentHTML: "<span>input label <em>updated</em></span>",
         classes: "wmnds-m-t-20"
      },
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}

Nunjucks properties
NameTypeDescription
idstringRequired. Must be unique. The id of the input.
namestringRequired. The name of the input, which is submitted with the form data.
typestringType of input control to render. Defaults to text.
requiredbooleanIf true, input is required/must be filled out. Defaults to false.
classesstringClasses to add to the input component.
errorbooleanIf true, error will be displayed. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
disabledbooleanIf true, input should be disabled. Defaults to false.
maxLengthstringThe maxLength is the maximum number of characters allowed in the input. It's an optional field.
placeholderstringPlaceholder is a short hint that describes the expected value of a input. It's an optional field.
valuestringOptional initial value of the input.
labelobjectRequired. Options for the label component. See label.
formGroupobjectOptions for the form-group wrapper. See formGroup options below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the error message span tag.

Options for label

NameTypeDescription
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within the label. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within the label. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the label tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group (e.g. to show error state for the whole group)

Text input with error


Input custom error message

HTML markup
<div class="wmnds-fe-group wmnds-fe-group--error">
  <label class="wmnds-fe-label" for="error-input">Form label</label>
  <span class="wmnds-fe-error-message">Input custom error message</span>
  <input class="wmnds-fe-input wmnds-fe-input--error" id="error-input" name="error-input" type="text" value="" />
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/text-input/_text-input.njk" import wmndsTextInput %}

{{
   wmndsTextInput({
      id: "example-input",
      name: "example-input",
      type: "text",
      required: true,
      classes: null,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Custom error message for this example input",
         contentHTML: null, 
         classes: null
      },
      disabled: false,
      maxLength: "200",
      placeholder: "input placeholder...",
      value: "",
      label: {
         contentText: "input label",
         contentHTML: "<span>input label <em>updated</em></span>",
         classes: "wmnds-m-t-20"
      },
      formGroup: {
         classes: "wmnds-m-t-20"
      }
    })
}}

Nunjucks properties
NameTypeDescription
idstringRequired. Must be unique. The id of the input.
namestringRequired. The name of the input, which is submitted with the form data.
typestringType of input control to render. Defaults to text.
requiredbooleanIf true, input is required/must be filled out. Defaults to false.
classesstringClasses to add to the input component.
errorbooleanIf true, error will be displayed. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage.
disabledbooleanIf true, input should be disabled. Defaults to false.
maxLengthstringThe maxLength is the maximum number of characters allowed in the input. It's an optional field.
placeholderstringPlaceholder is a short hint that describes the expected value of a input. It's an optional field.
valuestringOptional initial value of the input.
labelobjectRequired. Options for the label component. See label.
formGroupobjectOptions for the form-group wrapper. See formGroup options below.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the error message span tag.

Options for label

NameTypeDescription
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within the label. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within the label. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the label tag.

Options for formGroup

NameTypeDescription
classesstringClasses to add to the form group (e.g. to show error state for the whole group)