Numberinput
Use Numberinput to enable marketers enter valid numerical values in a form.
Default
<e-numberinput></e-numberinput><e-numberinput></e-numberinput>JavaScript
Variations
placeholder
<e-numberinput placeholder="Placeholder"></e-numberinput><e-numberinput placeholder="Placeholder"></e-numberinput>JavaScript
initial value
<e-numberinput value="20"></e-numberinput><e-numberinput value="20"></e-numberinput>JavaScript
default value
<e-numberinput default-value="20000"></e-numberinput><e-numberinput default-value="20000"></e-numberinput>JavaScript
disabled
<e-numberinput disabled></e-numberinput><e-numberinput disabled></e-numberinput>JavaScript
invalid
<e-numberinput invalid></e-numberinput><e-numberinput invalid></e-numberinput>JavaScript
small
<e-numberinput size="small"></e-numberinput><e-numberinput size="small"></e-numberinput>JavaScript
medium
<e-numberinput size="medium"></e-numberinput><e-numberinput size="medium"></e-numberinput>JavaScript
large
<e-numberinput size="large"></e-numberinput><e-numberinput size="large"></e-numberinput>JavaScript
Only integer number
<e-numberinput integer></e-numberinput><e-numberinput integer></e-numberinput>JavaScript
Minimum value
<e-numberinput min="-1000"></e-numberinput><e-numberinput min="-1000"></e-numberinput>JavaScript
API Reference e-numberinput
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| value | Sets the default value | integer | 0 | |
| disabled | Sets disabled state | boolean | false | |
| invalid | Sets invalid state | boolean | false | |
| size | Sets size of the input | "small" | "medium" | "large" | ||
| integer | Only integer numbers can be used as input | boolean | false | |
| min | Sets the minimum value | integer | ||
| max | Sets the maximum value | integer | ||
| step | Sets the step size | number | 1 | |
| default-value | The input falls back to this value if empty | number | null |
Events
| Event | Description | Returns |
|---|---|---|
change | Fires on blur | {
detail: {
value: [value],
}
} |
input | Fires on input change | {
detail: {
value: [value],
}
} |
error | Fires on blur if value is not valid (value is not numeric or out of min and max boundaries) | {
detail: {
message: "Value is not valid!",
}
} |
Numberinput
Use Numberinput to enable marketers enter valid numerical values in a form.
Anatomy
- Label - Should be clean and concise. Sentence case, no colons.
- Input area - Can be manipulated with keyboard.
- Step buttons - Can be manipulated with cursor or ⬆ or ⬇ keys. Pressing it increments or decrements the input value by a specified amount.
- Postfix / Prefix (optional) - should be added when expecting currency, percentage or numbers referring to a unit.
Behaviour
Numberinput’s built in behaviour is the following:
- Optionally, the first character may be a ‘-’ character.
- One or more characters in the range ‘0–9’.
- Optionally, the following parts, in exactly the following order:
- a ‘.’ character
- one or more characters in the range ‘0–9’
- Numberinput should ignore any invalid characters, simply by not letting enter them. If the user pastes in invalid characters, an inline error is triggered and displayed until the error is resolved. Clicking a step button at this point resets the counter to the default value.
- If the entered value exceeds the initially defined min or max, an error is triggered. Pressing a “step” button automatically changes the value to min+1 or max-1 and the error is resolved.
Best practices
- Use a clear and concise label.
- Make sure to display the initial value.
- Adjust Numberinput’s size to the length of the expected value.
Help marketers enter valid values
- Use Numberinput when expecting a numerical value to be entered. Don’t use Numberinput when asking for code or string, like: IP address, phone number, date.
- Mind the error messages, provide marketers an actionable feedback, possibly on defocusing the Numberinput.
- When min or max value is set, make sure to communicate it in an .e-field__message. Not necessary when min equals 0 or when expecting a percentage between 0% and 100% and the environment makes it clear.
- Attach e-field__postfix__text in front of the input when expecting currency.
- Attach e-field__postfix__text behind the input when expecting percentage or numbers referring to a unit.
Steps
- Clicking one of the buttons or pressing the ⬆ or ⬇ keys should increment/decrement the input value.
- Clicking on steps should increase or decrease the value of the input by an initially set up number. It should be 1 by default. The step could also be set to jump decimal values.
- The counter should accelerate when the user keeps pressing the button ⬆ or ⬇ on focus or the mouse on one of the step buttons.
- Optionally Numberinput can be set to snap pasted numbers to the closest step.