Choose a version:

NumberField

Captures numeric input from merchants. Provides built-in number validation and appropriate keyboard layout for numeric entry.

Anchor to propertiesProperties

Anchor to controls controls 'auto' | 'stepper' | 'none': Sets the type of controls displayed for the field.

stepper: displays buttons to increase or decrease the value of the field by the stepping interval defined in the step property. Note that in POS adding stepper controls simplifies the behaviour of the Number Field itself. The field supports only integer values, is always-populated and automatically validates the value to be within the min and max bounds. Validation, label, details and placeholder are not supported when using Stepper controls.

none: no controls are displayed and users must input the value manually.

auto: the presence of the controls depends on the surface and context.
Anchor to details details string: Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.

Details are not supported when using Stepper controls
Anchor to disabled disabled boolean Default: false: Disables the field, disallowing any interaction.
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

Error is not supported when using Stepper controls
Anchor to id id string: A unique identifier for the element.
Anchor to inputMode inputMode 'decimal' | 'numeric' Default: 'decimal': Sets the virtual keyboard.

Input mode is not supported when using Stepper controls
Anchor to label label string: Content to use as the field label.

Label is not supported when using Stepper controls
Anchor to max max number Default: Infinity: The highest decimal or integer to be accepted for the field. When used with step the value will round down to the max number.

Note: a user will still be able to use the keyboard to input a number higher than the max. It is up to the developer to add appropriate validation.
Anchor to min min number Default: -Infinity: The lowest decimal or integer to be accepted for the field. When used with step the value will round up to the min number.

Note: a user will still be able to use the keyboard to input a number lower than the min. It is up to the developer to add appropriate validation.
Anchor to placeholder placeholder string: A short hint that describes the expected value of the field.

Placeholder text is not supported when using Stepper controls due to constrained space for the number field, especially on phones.
Anchor to required required boolean Default: false Required is not supported when using Stepper controls: Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.
Anchor to value value string: The current value for the field. If omitted, the field will be empty.

Was this section helpful?

Anchor to slotsSlots

Learn more about using slots

Anchor to accessory accessory HTMLElement: Additional content to be displayed in the field. Commonly used to display clickable text.

Note
Accessory is not supported when using Stepper controls

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events

Anchor to blur blur (event: <"s-number-field">) => void: Callback when the element loses focus.
Anchor to change change (event: <"s-number-field">) => void: Callback after editing completes (typically on blur).
Anchor to focus focus (event: <"s-number-field">) => void: Callback when the element receives focus.
Anchor to input input (event: <"s-number-field">) => void: Callback when the user makes any changes in the field.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-number-field

label="Item count"

value="976"

required

Preview

Anchor to examplesExamples

NumberField usage patterns

Anchor to example-controls-and-constraintsControls and constraints

Use controls for increment/decrement buttons and set min/max constraints

Anchor to example-input-modesInput modes

Specify inputMode for decimal or numeric keyboard layouts

Was this section helpful?

Controls and constraints

<s-number-field

label="Quantity"

value="5"

min={1}

max={100}

controls

onInput={(event) => console.log('Input:', event.target.value)}

onChange={(event) => console.log('Change:', event.target.value)}

/>;

Examples

Controls and constraints

Description

Use controls for increment/decrement buttons and set min/max constraints

Default

<s-number-field
  label="Quantity"
  value="5"
  min={1}
  max={100}
  controls
  onInput={(event) => console.log('Input:', event.target.value)}
  onChange={(event) => console.log('Change:', event.target.value)}
/>;

Input modes

Description

Specify inputMode for decimal or numeric keyboard layouts

Default

<s-stack>
  <s-number-field
    label="Price"
    placeholder="0.00"
    inputMode="decimal"
    onInput={(event) => console.log('Value:', event.target.value)}
  />

  <s-number-field
    label="Stock count"
    placeholder="0"
    inputMode="numeric"
    onInput={(event) => console.log('Value:', event.target.value)}
  />
</s-stack>;