Skip to content

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

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-actions-background-colorSpecifies the background color of the component's clearable and number-button-type elements.
--calcite-input-actions-background-color-hoverSpecifies the background color of the component's clearable and number-button-type elements when hovered.
--calcite-input-actions-background-color-pressSpecifies the background color of the component's clearable and number-button-type elements when pressed.
--calcite-input-actions-icon-colorSpecifies the icon color of the component's clearable and number-button-type elements.
--calcite-input-actions-icon-color-hoverSpecifies the icon color of the component's clearable and number-button-type elements when hovered.
--calcite-input-actions-icon-color-pressSpecifies the icon color of the component's clearable and number-button-type elements when pressed.
--calcite-input-loading-background-colorSpecifies the background color of the loading element.
--calcite-input-loading-fill-colorSpecifies the fill color of the loading element.
--calcite-input-number-background-colorSpecifies the background color of the component.
--calcite-input-number-border-colorSpecifies the border color of the component.
--calcite-input-number-corner-radiusSpecifies the border radius of the component.
--calcite-input-number-heightSpecifies the height of the component.
--calcite-input-number-placeholder-text-colorSpecifies the text color of the placeholder in the component.
--calcite-input-number-text-colorSpecifies the text color of the component.
--calcite-input-number-text-color-focusSpecifies the text color of the component when focused.
--calcite-input-prefix-background-colorSpecifies the background color of the prefix element.
--calcite-input-prefix-sizeSpecifies the width of the prefix element.
--calcite-input-prefix-text-colorSpecifies the text color of the prefix element.
--calcite-input-suffix-background-colorSpecifies the background color of the suffix element.
--calcite-input-suffix-sizeSpecifies the width of the suffix element.
--calcite-input-suffix-text-colorSpecifies the text color of the suffix element.

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.