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-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 icon again."
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>

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" or "en-US" or "fi-FI" or "sv-SE" "fi-FI"
margin margin Controls the margin of the component. "auto" or "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. 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. "" or "default" or "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 "0"

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>

Dependencies #

Depends on #

Graph #

graph TD;
duet-number-input --> duet-input
duet-number-input --> duet-visually-hidden
duet-number-input --> duet-icon
duet-input --> duet-label
duet-input --> duet-tooltip
duet-tooltip --> duet-visually-hidden
style duet-number-input fill:#f9f,stroke:#333,stroke-width:4px

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

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes


Troubleshooting

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