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 #

For entering arbitrary numeric values. Use input component instead.

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.

Number Input components uses a basic HTML <input> element behind the scenes and offers similar functionality and API for its users.
label property is always required for an accessible input control.
labelHidden property hides the above label visually, but still keeps it accessible for assistive technologies.
Use role property to define a specific role attribute for the input.
When you need to disable the number input, use disabled property as it conveys this information correctly to assistive technologies as well.
accessibleAdd property can be used to add accessible label for the add button that is read for screen reader users.
accessibleSubtract property can be used to add accessible label for the subtract button that is read for screen reader users.
accessibleLive property can be used to format the message used to announce current amount when switching between amounts. The string {current} is replaced with the current amount.
accessibleLiveEnabled property can be used to disable the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead.
accessibleActiveDescendant property can be used to indicate the id of a related component’s visually focused element.
accessibleControls property can be used to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
accessibleOwns property can be used to indicate the id of a component owned by the input.
accessibleDescribedBy property can be used to indicate the id of a component which contains descriptive/help text related to the input.

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

Troubleshooting

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

Number Input Ready

Examples #

Properties #

Events #

Methods #

`getValueAsNumber() => Promise<number>` #

Returns #

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

Parameters #

Returns #

Slots #

Usage #

When to use #

When not to use #

Accessibility #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

Examples #

Properties #

Events #

Methods #

getValueAsNumber() => Promise<number> #

Returns #

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

Parameters #

Returns #

Slots #

Usage #

When to use #

When not to use #

Accessibility #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

`getValueAsNumber() => Promise<number>` #

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