Note: Version bump only for package @spectrum-web-components/number-field

• number-field: show decimal on iPad minimized keyboard (#4784) (deb7a1c)

Note: Version bump only for package @spectrum-web-components/number-field

• add null check in updated method of sp-number-field (#4709) (7b1eeab)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: update IME change detection (#4672) (de05aee)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: multiple separators use-cases in decimal inputs in iOS devices (#4571) (6319da8)

• number-field: updated number field to respect all locales (#4508) (cc6e928)

• number-field: select full value when using Tab to enter a field with a unit (#4340) (a9d5cef)

• number-field, slider: floating point roundoff precision bug (#4263) (74480ef)
• number-field: handles values greater than 1000 (#4417) (45d69d0)

• number-field, slider: floating point roundoff precision bug (#4263) (74480ef)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

• asset: use core tokens (99e76f4)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• combobox: add combobox pattern (#3894) (47d7d71), closes #3887

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: validate min/max in more contexts (2328a62)

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: update display value on scroll and arrow up/down (fc59a18)

• infield-button: add infield-button package (057b885)

• number-field: prevent over excited "change" events (7b93724)

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: handle negative numbers (#3673) (62553dd)
• number-field: update number-field value on pressing "enter" (#3638) (649eb2f)

Note: Version bump only for package @spectrum-web-components/number-field

• correct composition entry of multi-byte numbers (#3610) (5e11934)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: update button label to use number-field-labels as part of the text (#3474) (b92daf2)

• number-field,search,textfield: add t-shirt sizes (fda8f96)

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: simplify width management (ef4765a)

• number-field: use core tokens (23a924e)

Note: Version bump only for package @spectrum-web-components/number-field

• add "editable" option to "sp-slider" (e86d7fa)
• add input validation to Number Field (b1dd5ea)
• allow user input of extemely large number when a max is applied (0644b7f)
• allow value when step=0 (41de75a)
• apply "HelpTextMixin" to form elements (a952447)
• convert the langage resolution workflow to a Reactive Controller (b7781db)
• correct the origin on "maximumFractionDigits" when deciding "inputMode" (e2fe9c8)
• ensure "wheel" interactions lead to a "change" event (3be87cd)
• ensure dependencies included in package.json (eb77858)
• ensure reactivity of resolved language (5863a15)
• ensure streamingListener ends even if pointercancel not fired (74105f2)
• explicitly setting NumberField wheel event handler as not passive (fad1496)
• manage "lang" via context provided by "sp-theme" (b1e3457)
• move hover/focus hoisting into conditioning (15ac2f7)
• normalize wheel input directionally for more predictable input (e4383a8)
• number-field: add an "indeterminate" state (8bde8a1)
• number-field: add support for modified stepping (#1534) (f8ec763)
• number-field: added flag to scroll event to allow slider component to update on scroll (4199eb0)
• number-field: clean up delivery of quiet variant (cd93964)
• number-field: dispatch input/change events as expected (4a457ee)
• number-field: ensure "quiet" Number Field is sized correctly in the DOM (3ea2c8f)
• number-field: include dependancy listings (5c9031d)
• number-field: prevent changes by user when readonly (64a7e93)
• number-field: prevent interactin with stepper buttons when disabled (ae20343)
• number-field: process 2 byte characters as their single byte cousins (f424c0a)
• number-field: readonly - no pointer events for stepper buttons (05364fb)
• number-field: support non-supported units in "Intl.numberFormat" (d846c0b)
• number-field: validate value before dispatching "change" event (8c2ad89)
• prevent console.log in source and test files (3ee082c)
• theme: stop language resolution propagation and demo using local languages (6b81391)

• adopt DNA@7 base Spectrum CSS (e08cafd)
• include all Dev Mode files in side effects (f70817c)
• number-field: add number field pattern (384ab34)
• number-field: use new config (8d42d69)
• shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
• support Spectrum Token consumption and update Action Button to use them (743ab16)
• update lit-* dependencies, wip (377f3c8)

• ensure streamingListener ends even if pointercancel not fired (74105f2)

• theme: stop language resolution propagation and demo using local languages (6b81391)

• move hover/focus hoisting into conditioning (15ac2f7)

• number-field: use new config (8d42d69)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• ensure "wheel" interactions lead to a "change" event (3be87cd)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• ensure dependencies included in package.json (eb77858)

• correct the origin on "maximumFractionDigits" when deciding "inputMode" (e2fe9c8)
• ensure reactivity of resolved language (5863a15)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• convert the langage resolution workflow to a Reactive Controller (b7781db)

• number-field: added flag to scroll event to allow slider component to update on scroll (4199eb0)

Note: Version bump only for package @spectrum-web-components/number-field

• include all Dev Mode files in side effects (f70817c)

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: ensure "quiet" Number Field is sized correctly in the DOM (3ea2c8f)

• support Spectrum Token consumption and update Action Button to use them (743ab16)

• explicitly setting NumberField wheel event handler as not passive (fad1496)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: validate value before dispatching "change" event (8c2ad89)

• number-field: process 2 byte characters as their single byte cousins (f424c0a)

• number-field: clean up delivery of quiet variant (cd93964)
• allow user input of extemely large number when a max is applied (0644b7f)
• allow value when step=0 (41de75a)

• apply "HelpTextMixin" to form elements (a952447)
• number-field: prevent interactin with stepper buttons when disabled (ae20343)

• update lit-* dependencies, wip (377f3c8)

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: prevent changes by user when readonly (64a7e93)
• number-field: readonly - no pointer events for stepper buttons (05364fb)

• adopt DNA@7 base Spectrum CSS (e08cafd)

• number-field: add an "indeterminate" state (8bde8a1)

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: support non-supported units in "Intl.numberFormat" (d846c0b)
• add input validation to Number Field (b1dd5ea)

Note: Version bump only for package @spectrum-web-components/number-field

• add "editable" option to "sp-slider" (e86d7fa)

Note: Version bump only for package @spectrum-web-components/number-field

Note: Version bump only for package @spectrum-web-components/number-field

• number-field: add support for modified stepping (#1534) (f8ec763)
• manage "lang" via context provided by "sp-theme" (b1e3457)
• normalize wheel input directionally for more predictable input (e4383a8)

• prevent console.log in source and test files (3ee082c)

• number-field: dispatch input/change events as expected (4a457ee)
• number-field: include dependancy listings (5c9031d)

• number-field: add number field pattern (384ab34)

<sp-number-field> elements are used for numeric inputs. Upon interaction via the ArrowUp or ArrowDown keys, the scroll wheel, or the stepper UI, when not hidden by the hide-stepper attribute, the input value incrementally increases or decreases by the value of the step attribute. The shift key can be used to apply steps at 10 time (or the value of the step-modifier attribute times) their normal rate.

yarn add @spectrum-web-components/number-field

Import the side effectful registration of <sp-number-field> via:

import '@spectrum-web-components/number-field/sp-number-field.js';

When looking to leverage the NumberField base class as a type and/or for extension purposes, do so via:

import { NumberField } from '@spectrum-web-components/number-field';

<sp-number-field
    label="Size"
    value="1024"
    size="s"
    style="--spectrum-stepper-width: 85px"
></sp-number-field>

<sp-number-field
    label="Size"
    value="1024"
    size="m"
    style="--spectrum-stepper-width: 110px"
></sp-number-field>

<sp-number-field
    label="Size"
    value="1024"
    size="l"
    style="--spectrum-stepper-width: 135px"
></sp-number-field>

<sp-number-field
    label="Size"
    value="1024"
    size="xl"
    style="--spectrum-stepper-width: 160px"
></sp-number-field>

An <sp-number-field> element will process its numeric value with new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.value) in order to prepare it for visual delivery in the input. In order to customize this processing supply your own Intl.NumberFormatOptions via the formatOptions property, or format-options attribute as seen below.

this.resolvedLanguage represents the language in which the <sp-number-field> element is currently being delivered. By default, this value will represent the language established by the lang attribute on the root <html> element while falling back to navigator.language when that is not present. This value can be customized via a language context provided by a parent element that listens for the sp-language-context event and supplies update language settings to the callback function contained therein. Applications leveraging the <sp-theme> element to manage the visual delivery or text direction of their content will be also be provided a reactive context for supplying language information to its descendants.

The following example uses the signDisplay option to include the plus sign for positive numbers, for example to display an offset from some value. In addition, it always displays a minimum of 1 digit after the decimal point, and allows up to 2 fraction digits. If the user enters more than 2 fraction digits, the result will be rounded.

<sp-field-label for="decimals">Adjust exposure</sp-field-label>
<sp-number-field
    id="decimals"
    value="0"
    style="width: 100px"
    format-options='{
        "signDisplay": "exceptZero",
        "minimumFractionDigits": 1,
        "maximumFractionDigits": 2
    }'
></sp-number-field>

The style: 'percent' option can be passed to the formatOptions property to treat the value as a percentage. In this mode, the value is multiplied by 100 before it is displayed, i.e. 0.45 is displayed as "45%". The reverse is also true: when the user enters a value, the change event will be triggered with the entered value divided by 100. When the percent option is enabled, the default step automatically changes to 0.01 such that incrementing and decrementing occurs by 1%. This can be overridden with the step property.

<sp-field-label for="percents">Sales tax</sp-field-label>
<sp-number-field
    id="percents"
    style="width: 200px"
    value="0.05"
    format-options='{
        "style": "percent"
    }'
></sp-number-field>

The style: 'currency' option can be passed to the formatOptions property to treat the value as a currency value. The currency option must also be passed to set the currency code (e.g. USD) to use. In addition, the currencyDisplay option can be used to choose whether to display the currency symbol, currency code, or currency name. Finally, the currencySign option can be set to accounting to use accounting notation for negative numbers, which uses parentheses rather than a minus sign in some locales.

If you need to allow the user to change the currency, you should include a separate dropdown next to the sp-number-field. The sp-number-field itself will not determine the currency from the user input.

<sp-field-label for="currency">Transaction amount</sp-field-label>
<sp-number-field
    id="currency"
    style="width: 200px"
    value="45"
    format-options='{
        "style": "currency",
        "currency": "EUR",
        "currencyDisplay": "code",
        "currencySign": "accounting"
    }'
></sp-number-field>

The style: 'unit' option can be passed to the formatOptions property to format the value with a unit of measurement. The unit option must also be passed to set which unit to use (e.g. inch). In addition, the unitDisplay option can be used to choose whether to display the unit in long, short, or narrow format.

If you need to allow the user to change the unit, you should include a separate dropdown next to the number field. The number field itself will not determine the unit from the user input.

Note: The unit style is not currently supported in Safari. A polyfill may be necessary.

<sp-field-label for="units">Package width</sp-field-label>
<sp-number-field
    id="units"
    style="width: 200px"
    value="4"
    format-options='{
        "style": "unit",
        "unit": "inch",
        "unitDisplay": "long"
    }'
></sp-number-field>

While Intl.NumberFormatOptions does support a wide range of units, it is possible to encounter units (e.g. the graphics units of pixel, pixels, points, etc.) that are not supported therein. When this occurs, an <sp-number-field> element will attempt to polyfill support for this unit. See the following example delivering { style: "unit", unit: "px" } below:

<sp-field-label for="units">Document width in pixels</sp-field-label>
<sp-number-field
    id="units"
    style="width: 200px"
    value="500"
    format-options='{
        "style": "unit",
        "unit": "px"
    }'
></sp-number-field>

Note: the polyfilling done here is very simplistic and is triggered by supplying options that would otherwise cause the Intl.NumberFormat() call to throw an error. Once the unsupporting unit of px causes the construction of the object to throw, a back up formatter/parser pair will be created without the supplied unit data. When the style is set to unit, the unit value of will be adopted as the static unit display. This means that neither pluralization or translation will be handled within the <sp-number-field> element itself. If pluralization or translation is important to the delivered interface, please be sure to handle passing those strings into to element via the formatOptions property reactively to the value of the element or locale of that page in question.

The max and max properties can be used to limit the entered value to a specific range. The value will be clamped when the user commits the value to the <sp-number-field> element. In addition, the increment and decrement buttons will be disabled when the value is within one step value from the bounds. Ranges can be open ended by only providing a value for either min or max rather than both.

If a valid range is known ahead of time, it is a good idea to provide it to <sp-number-field> so it can optimize the experience. For example, when the minimum value is greater than or equal to zero, it is possible to use a numeric keyboard on iOS rather than a full text keyboard (necessary to enter a minus sign).

<sp-field-label for="red">Red value</sp-field-label>
<sp-number-field id="red" value="4" min="0" max="255"></sp-number-field>

The step prop can be used to snap the value to certain increments. If there is a min defined, the steps are calculated starting from that minimum value. For example, if min === 2, and step === 3, the valid step values would be 2, 5, 8, 11, etc. If no min is defined, the steps are calculated starting from zero and extending in both directions. In other words, such that the values are evenly divisible by the step. A step can be any positive decimal. If no step is defined, any decimal value may be typed, but incrementing and decrementing snaps the value to an integer.

If the user types a value that is between two steps and blurs the input, the value will be snapped to the nearest step. When incrementing or decrementing, the value is snapped to the nearest step that is higher or lower, respectively. When incrementing or decrementing from an empty field, the value starts at the minValue or maxValue, respectively, if defined. Otherwise, the value starts from 0.

<sp-field-label
    for="step"
>Step</sp-field-label>
<sp-number-field
    id="step"
    step="10"
></sp-number-field>

<sp-field-label
    for="step-min"
>Step + min</sp-field-label>
<sp-number-field
    id="step-min"
    min="2"
    step="3"
></sp-number-field>

<sp-field-label
    for="step-min-max"
>Step + min + max</sp-field-label>
<sp-number-field
    id="step-min-max"
    min="2"
    max="21"
    step="3"
></sp-number-field>

The <sp-number-field> component doesn't manage a default value by itself. This means that consumers can set the value of the number-field as an empty string by clearing the input. If we want the number-field to reset to a default-value when the user clears the input, we can listen for the change event on the number-field component and set its value to the desired default-value if the input is empty.

<sp-field-label for="default">
    Default value of this number field is 42
</sp-field-label>
<sp-number-field id="default" value="20"></sp-number-field>

<script type="module">
    customElements.whenDefined('sp-number-field').then(() => {
        const numberField = document.querySelector('#default');

        numberField.addEventListener('change', (event) => {
            const target = event.target;
            if (isNaN(target.value)) {
                target.value = '42';
            }
        });
    });
</script>