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

Number Input

About

What does it do?

  • Allows users to select a number by increasing or reducing it incrementally

When to use it?

  • When user needs to select and adjust a number incrementally

When not to use it?

  • When user needs to enter information other than a number, for example location, postcode or place of interest
  • Use fixed width inputs for content that has known length, e.g. postcode.

How it works?

  • When user clicks minus button, number reduces by 1, when user clicks plus button, number increases by 1


HTML markup
<div class="wmnds-fe-group">
  <div class="wmnds-fe-number-input">
    <label class="wmnds-fe-label wmnds-h4" for="input">Search radius</label>
    <div class="wmnds-fe-number-input__container wmnds-grid wmnds-grid--spacing-3-lg">
      <div class="wmmds-col-auto">
        <button type="button" class="wmnds-fe-number-input__control" title="Decrease">
          <svg class="wmnds-accordion__icon">
            <use xlink:href="#wmnds-general-minimise" href="#wmnds-general-minimise"></use>
          </svg>
        </button>
      </div>
      <div class="wmnds-col-auto">
        <input class="wmnds-fe-number-input__input" type="number" id="input" name="input" value="" placeholder="1" />
      </div>
      <div class="wmmds-col-auto">
        <button type="button" class="wmnds-fe-number-input__control" title="Increase">
          <svg class="wmnds-accordion__icon">
            <use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/number-input/_number-input.njk" import wmndsNumberInput %}

{{
   wmndsNumberInput({
      id: "example-number-input",
      name: "example-number-input",
      required: true,
      classes: null,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Custom error message for this example input",
         contentHTML: null, 
         classes: null
      },
      disabled: false,
      placeholder: "1",
      value: "",
      label: {
         contentText: 'Search radius',
         classes: 'wmnds-h4'
      }
   })
}}

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.
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.
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)