Skip to main content

Number Input Ready

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" 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>
Open in new window
<duet-number-input label="Sijoitettava pääoma" value="1234" min="1000" max="10000" step="1000" rounding="false">
</duet-number-input>

Properties #

Property Attribute Description Type Default
accessibleActiveDescendant accessible-active-descendant Indicates the id of a related component’s visually focused element. string undefined
accessibleAdd accessible-add Accessible label for the add button that is read for screen reader users. string getLocaleString(this.accessibleAddDefaults, this.language)
accessibleAddDefaults accessible-add-default Defaults for accessibleAdd DuetLangObject | string { fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet", }
accessibleControls accessible-controls Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component. string undefined
accessibleDescribedBy accessible-described-by Indicates the id of a component that describes the input. string undefined
accessibleDescription accessible-description Aria description the button string undefined
accessibleDetails accessible-details Details of the component string undefined
accessibleLabelledBy accessible-labelled-by String of id's that indicate alternative labels elements string undefined
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 getLocaleString(this.accessibleLiveDefaults, this.language)
accessibleLiveDefaults accessible-live-default Defaults for accessibleLive DuetLangObject | string { fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} euro valt", }
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
accessibleOwns accessible-owns Indicates the id of a component owned by the input. string undefined
accessibleSubtract accessible-subtract Accessible label for the subtract button that is read for screen reader users. string getLocaleString(this.accessibleSubtractDefaults, this.language)
accessibleSubtractDefaults accessible-subtract-defaults Defaults for accessibleSubtract DuetLangObject | string { fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet", }
disabled disabled Makes the number input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. boolean false
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 getLocaleString(this.labelDefaults, this.language)
labelDefaults label-default Defaults for Label DuetLangObject | string { fi: "Nimilappu", en: "Label", sv: "Etikett", }
labelHidden label-hidden Visually hide the label, but still show it to screen readers. boolean false
language language [DEPRECATED] this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing

The currently active language. This setting changes the accessible labels to match the chosen language.
"en" | "fi" | "sv" getLanguage()
locale locale Locale used to format the entered value. "en-GB" | "en-US" | "fi-FI" | "sv-SE" getLocale(this.language).locale
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
rounding rounding Controls whether or not value gets rounded to the nearest multiple of a step on blur. Set to "false" to disable this behaviour. boolean true
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 getLocale(this.language).money
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 #

getValueAsNumber() => Promise<number> #

Returns a promise which resolves to the current input numeric value.

Returns #

Type: Promise<number>

setFocus(options?: FocusOptions) => Promise<void> #

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

Parameters #

Name Type Description
options FocusOptions

Returns #

Type: Promise<void>

Slots #

Slot Description
"tooltip" Use to place a tooltip alongside the label.

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.

Integration guidelines


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

Tutorials

Usage With Markdown


Troubleshooting

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