Skip to main content

Number Input
New

Number input lets user specify a numeric value using plus and minus buttons which must be no less than a given value, and no more than another given value.

Number Input allows you to listen for duetChange event that is triggered whenever the user presses the plus and minus buttons, or exits the input after editing the number manually.

Examples

Open in new window
<duet-number-input label="Sijoitettava pääoma" value="100000" min="50000"
max="500000" step="5000" unit="">

</duet-number-input>

<script>
// Select the above number input component.
var input = document.querySelector("duet-number-input")

// Listen for changes in the amount entered.
input.addEventListener("duetChange", function(e) {
console.log("Change detected in Number Input:", e.detail)
})
</script>
Open in new window
<duet-number-input label="Sijoitettava pääoma" value="" min="50000"
max="500000" step="5000" unit="">

</duet-number-input>

<script>
// Select the above number input component.
var input = document.querySelector("duet-number-input")

// Listen for changes in the amount entered.
input.addEventListener("duetChange", function(e) {
console.log("Change detected in Number Input:", e.detail)
})
</script>
Open in new window
<duet-grid responsive>
<duet-grid-item fill>
<duet-number-input label="Korvausmäärä" value="100000" min="50000" max="500000"
step="50000" unit="" margin="none" accessible-live-enabled="false" expand>

</duet-number-input>
</duet-grid-item>
<duet-grid-item fill>
<duet-input label="Vakuutuksen hinta" value="10,00 € / kk" disabled
margin="none" expand>
</duet-input>
</duet-grid-item>
</duet-grid>
<duet-caption size="small">
Huom! Oheinen esimerkki ei perustu todelliseen hinnoitteluun.
</duet-caption>
<duet-visually-hidden>
<span aria-live="polite"></span>
</duet-visually-hidden>

<script>
// Select the above components and save price ratio for later usage.
var input = document.querySelector("duet-number-input")
var output = document.querySelector("duet-input")
var aria = document.querySelector("duet-visually-hidden span")
var ratio = 0.0001

// Listen for changes in the amount entered.
input.addEventListener("duetChange", function(e) {
var value = parseInt(e.detail.value) * ratio
var price = value.toFixed(2).toString().replace(".", ",")
output.value = price + " € / kk"
aria.innerHTML = "Korvausmäärä " + e.detail.value + " euroa. Kuukausihinta tällä korvausmäärällä on " + price + " euroa."
})
</script>
Open in new window
<duet-number-input
label="Sijoitettava pääoma"
value="100000"
min="50000"
max="500000"
step="5000"
unit=""
expand>

</duet-number-input>
Open in new window
<duet-number-input
label="Sijoitettava pääoma"
error="There’s an error!"
value="100000"
min="50000"
max="500000"
step="5000"
unit=""
expand>

</duet-number-input>
Open in new window
<duet-number-input
tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
label="Sijoitettava pääoma"
value="100000"
min="50000"
max="500000"
step="5000"
unit="">

</duet-number-input>
Open in new window
<duet-number-input
label="Amount of coverage"
locale="en-GB"
unit="£"
value="100000"
min="50000"
max="500000"
step="5000">

</duet-number-input>
Open in new window
<duet-number-input
label="Sijoitettava pääoma"
value="50000"
min="50000"
max="500000"
step="5000"
unit="">

</duet-number-input>

<script>
// Select the above number input component.
var input = document.querySelector("duet-number-input")

// Listen for changes in the amount entered.
input.addEventListener("duetChange", function(e) {
if (e.target.value) console.log("Change detected in Number Input:", e.detail)
})

// Create a helper to check whether a value is between specific range.
function isBetween(val, min, max) {
return val >= min && val < max
}

// Listen for input events to adjust the step amount.
input.addEventListener("duetInput", function(e) {
const value = e.detail.valueAsNumber
if (isBetween(value, 50000, 100000)) {
e.target.step = 5000
} else if (isBetween(value, 100000, 200000)) {
e.target.step = 10000
} else {
e.target.step = 50000
}
})
</script>
Open in new window
<duet-number-input
label="Sijoitettava pääoma"
value="1500"
min="1500"
max="50000"
step="5000"
unit="">

</duet-number-input>

<script>
// Select the above number input component.
var input = document.querySelector("duet-number-input")

// Listen for changes in the amount entered.
input.addEventListener("duetChange", function(e) {
var value = e.detail.valueAsNumber
var step = e.target.step
var min = e.target.min

// if value starts on min and we increment, the next value
// is value + min. in these cases we should subtract the
// min, so that the value is a multiple of the step
if (value === min + step) {
e.target.value = value - min
}
})
</script>

Properties #

Property Attribute Description Type Default
accessibleAdd accessible-add Accessible label for the add button that is read for screen reader users. string "Lisää summaan"
accessibleLive accessible-live Format of message used to announce current amount when switching between amounts. The string {current} is replaced with the current amount. string "{current} euroa valittuna"
accessibleLiveEnabled accessible-live-enabled Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead. boolean true
accessibleSubtract accessible-subtract Accessible label for the subtract button that is read for screen reader users. string "Vähennä summasta"
error error Display the input in error state along with an error message. string ""
expand expand Expands the input to fill 100% of the container width. boolean false
identifier identifier Adds a unique identifier for the input. string undefined
label label Label for the number input. string "label"
labelHidden label-hidden Visually hide the label, but still show it to screen readers. boolean false
locale locale Locale used to format the entered value. "en-GB" | "en-US" | "fi-FI" | "sv-SE" "fi-FI"
margin margin Controls the margin of the component. "auto" | "none" "auto"
max max Maximum value. number 1000000
min min Minimum value. number 0
name name Name of the input. string undefined
required required Set whether the input is required or not. Please note that this is required for accessible inputs when the user is required to fill them. When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors. boolean false
role role Defines a specific role attribute for the input. string undefined
step step Step amount. number 5000
theme theme Theme of the input. "" | "default" | "turva" ""
tooltip tooltip Tooltip to display next to the label of the input. string ""
unit unit Unit for the number input. string "€"
value value Value of the input. This is passed as a string since Number Input uses Duet’s Input component internally and we need the value to support spaces and the unit as well. string undefined

Events #

Event Description Type
duetBlur Emitted when the input loses focus. CustomEvent<{ originalEvent?: Event; component: "duet-number-input"; value: string; valueAsNumber: number; }>
duetChange Emitted when the value has changed. CustomEvent<{ originalEvent?: Event; component: "duet-number-input"; value: string; valueAsNumber: number; }>
duetFocus Emitted when the input has focus. CustomEvent<{ originalEvent?: Event; component: "duet-number-input"; value: string; valueAsNumber: number; }>
duetInput Emitted when a keyboard input has ocurred. CustomEvent<{ originalEvent?: Event; component: "duet-number-input"; value: string; valueAsNumber: number; }>

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-number-input. Use this method instead of the global
input.focus().

Returns #

Type: Promise<void>


Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • To let user specify a numeric value using plus and minus buttons which must be no less than a given value, and no more than another given value.

When not to use #

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.


Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.