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
| Name | Type | Description |
|---|---|---|
| id | string | Required. Must be unique. The id of the input. |
| name | string | Required. The name of the input, which is submitted with the form data. |
| required | boolean | If true, input is required/must be filled out. Defaults to false. |
| classes | string | Classes to add to the input component. |
| error | boolean | If true, error will be displayed. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage. |
| disabled | boolean | If true, input should be disabled. Defaults to false. |
| placeholder | string | Placeholder is a short hint that describes the expected value of a input. It's an optional field. |
| value | string | Optional initial value of the input. |
| label | object | Required. Options for the label component. See label. |
| formGroup | object | Options for the form-group wrapper. See formGroup options below. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| id | string | Id attribute to add to the error message span tag. |
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the error message span tag. |
Options for label
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the label. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the label. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the label tag. |
Options for formGroup
| Name | Type | Description |
|---|---|---|
| classes | string | Classes to add to the form group (e.g. to show error state for the whole group) |