Number field

The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).

The type of virtual keyboard to display on mobile devices.

• decimal: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.
• numeric: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.

Learn more about the inputmode attribute.

The amount the value can increase or decrease by. This can be an integer or decimal. If a max or min is specified with step when increasing/decreasing the value via the buttons, the final value will always round to the max or min rather than the closest valid amount.

The highest decimal or integer value accepted for the field. When used with step, the value rounds down to the maximum number.

Users can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.

The lowest decimal or integer value accepted for the field. When used with step, the value rounds up to the minimum number.

Users can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.

A non-editable text value displayed immediately before the editable portion of the field. This is useful for displaying an implied part of the value, such as https:// or +353.

This text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.

A non-editable text value displayed immediately after the editable portion of the field. This is useful for displaying an implied part of the value, such as @shopify.com or %.

This text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.

Controls browser autofill behavior for the field.

Basic values:

• on - Enables autofill without specifying content type (default)
• off - Disables autofill for sensitive data or one-time codes

Specific field values describe the expected data type. You can optionally prefix these with:

• section-${string} - Scopes autofill to a specific form section (when multiple forms exist on the same page)
• shipping or billing - Indicates whether the data is for shipping or billing purposes
• Both section and group (for example, section-primary shipping email)

Providing a specific autofill token helps browsers suggest more relevant saved data.

Learn more about the set of autocomplete values supported in browsers.

The initial value of the field when it first loads. Unlike placeholder, this is a real value that the user can edit and that gets submitted with the form. Once the user starts typing, their input replaces it. Changing this property after the field has loaded has no effect. To update the field value at any time, use value instead.

Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.

An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.

The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.

Controls whether the label is visible to all users or only to screen readers.

• visible: The label is shown to everyone (default).
• exclusive: The label is visually hidden but still announced by screen readers.

Use exclusive when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.

The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.

Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.

Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the error property to display validation messages.

Whether the field is disabled, preventing any user interaction.

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.

A callback fired when the number field loses focus.

Learn more about the blur event.

A callback fired when the number field value changes.

Learn more about the change event.

A callback fired when the number field receives focus.

Learn more about the focus event.

A callback fired when the user inputs data into the number field.

Learn more about the input event.