Input Number

Overview

Input Number is a form entry component, where users can enter a number to submit.

Input Number can limit the number of characters with maxLength and minLength, as well as limit the values with its min and max properties.

Usage

  • Number submissions in forms

Sample

2 samples
1
<calcite-input-number placeholder="Offset distance" step="1"></calcite-input-number>
v3.0.3

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus in and out of the component.
Tab and ShiftMoves focus in and out of the component.
EscWhen clearable is true, clears the component's value.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
alignmentalignmentSpecifies the text alignment of the component's value."end" | "start""start"
autocompleteSpecifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.AutoFill
clearableclearableWhen true, a clear button is displayed when the component has a value.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
iconiconSpecifies an icon to display.boolean | string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
integerintegerWhen true, restricts the component to integer numbers only and disables exponential notation.booleanfalse
labellabelAccessible name for the component's button or hyperlink.string
loadingloadingWhen true, the component is in the loading state and calcite-progress is displayed.booleanfalse
maxmaxWhen the component resides in a form, specifies the maximum value.number
maxLengthmax-length
deprecatedThis property has no effect on the component.
When the component resides in a form, specifies the maximum length of text for the component's value.
number
messageOverridesUse this property to override individual strings used by the component.{ clear?: string; loading?: string; }
minminWhen the component resides in a form, specifies the minimum value.number
minLengthmin-length
deprecatedThis property has no effect on the component.
When the component resides in a form, specifies the minimum length of text for the component's value.
number
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
numberButtonTypenumber-button-typeSpecifies the placement of the buttons."horizontal" | "none" | "vertical""vertical"
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
placeholderplaceholderSpecifies placeholder text for the component.string
prefixTextprefix-textAdds text to the start of the component.string
readOnlyread-onlyWhen true, the component's value can be read, but cannot be modified.booleanfalse
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
stepstepSpecifies the granularity that the component's value must adhere to."any" | number
suffixTextsuffix-textAdds text to the end of the component.string
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe current validation state of the component.{ valid: boolean; badInput: boolean; customError: boolean; patternMismatch: boolean; rangeOverflow: boolean; rangeUnderflow: boolean; stepMismatch: boolean; tooLong: boolean; tooShort: boolean; typeMismatch: boolean; valueMissing: boolean; }
valuevalueThe component's value.string

Slots

NameDescription
actionA slot for positioning a button next to the component.

Styles

NameDescription
--calcite-input-prefix-sizeSpecifies the component's prefix width.
--calcite-input-suffix-sizeSpecifies the component's suffix width.

Events

NameDescriptionBehavior
calciteInputNumberChangeFires each time a new value is typed and committed.bubblescomposed
calciteInputNumberInputFires each time a new value is typed.bubblescomposedcancelable

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
selectTextSelects the text of the component's value.selectText(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close