Input Number | Calcite Design System

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.

Sample

Usage

Number submissions in forms

Accessibility

Key	Function
`Tab`	Moves focus in and out of the component.
`Tab` and `Shift`	Moves focus in and out of the component.
`Esc`	When `clearable` is `true`, clears the component's `value`.

API reference

Properties

Property	Attribute	Description	Type	Default
alignment	alignment	Specifies the text alignment of the component's `value`.	`Alignment`	`"start"`
autocomplete	autocomplete	Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.	`AutoFill`
clearable	clearable	When `true` and the component has a `value`, a clear button is displayed.	`boolean`	`false`
disabled	disabled	When `true`, prevents interaction and decreases the component's opacity.	`boolean`	`false`
form	form	Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.	`string`
groupSeparator	group-separator	When `true`, number values are displayed with a group separator corresponding to the language and country format.	`boolean`	`false`
icon	icon	Specifies an icon to display.	`IconName \| boolean`
iconFlipRtl	icon-flip-rtl	When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s` icon`.	`boolean`	`false`
integer	integer	When `true`, restricts the component to integer numbers only and disables exponential notation.	`boolean`	`false`
label	label	Specifies an accessible label for the component's button or hyperlink.	`string`
labelText	label-text	Specifies the component's label text.	`string`
loading	loading	When `true`, displays a busy indicator.	`boolean`	`false`
max	max	When the component resides in a form, specifies the maximum `value`.	`number`
maxLength	max-length	deprecatedin v3.0.0, removal target v6.0.0 - This 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`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
min	min	When the component resides in a form, specifies the minimum `value`.	`number`
minLength	min-length	deprecatedin v3.0.0, removal target v6.0.0 - This 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`
name	name	Specifies the name of the component. Required to pass the component's `value` on form submission.	`string`
numberButtonType	number-button-type	Specifies the placement of the buttons.	`InputPlacement`	`"vertical"`
numberingSystem	numbering-system	Specifies the Unicode numeral system used by the component for localization.	`NumberingSystem`
placeholder	placeholder	Specifies the component's placeholder text.	`string`
prefixText	prefix-text	Specifies text to display at the start of the component.	`string`
readOnly	read-only	When `true`, the component's `value` can be read, but cannot be modified.	`boolean`	`false`
required	required	When `true` and the component resides in a form, the component must have a `value` in order for the form to submit.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
status	status	Specifies the input field's status, which determines message and icons.	`Status`	`"idle"`
step	step	Specifies the granularity that the component's `value` must adhere to.	`number \| "any"`
suffixText	suffix-text	Specifies text to display at the end of the component.	`string`
validationIcon	validation-icon	Specifies the validation icon to display under the component.	`IconName \| boolean`
validationMessage	validation-message	Specifies the validation message to display under the component.	`string`
validityread-only		The component's current validation state.	`ValidityState`
value	value	The component's value.	`string`

Slots

Name	Description
action	A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
label-content	A slot for rendering content next to the component's `labelText`.

Styles

Name	Description
--calcite-input-actions-background-color	Specifies the background color of the component's `clearable` and `number-button-type` elements.
--calcite-input-actions-background-color-hover	Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
--calcite-input-actions-background-color-press	Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
--calcite-input-actions-icon-color	Specifies the icon color of the component's `clearable` and `number-button-type` elements.
--calcite-input-actions-icon-color-hover	Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
--calcite-input-actions-icon-color-press	Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
--calcite-input-loading-background-color	When `loading`, specifies the background color of the component's `loading` element.
--calcite-input-loading-fill-color	When `loading`, specifies the fill color of the component's `loading` element.
--calcite-input-number-background-color	Specifies the component's background color.
--calcite-input-number-border-color	Specifies the component's border color.
--calcite-input-number-corner-radius	Specifies the component's border radius.
--calcite-input-number-icon-color	Specifies the component's icon color.
--calcite-input-number-height	Specifies the component's height.
--calcite-input-number-placeholder-text-color	Specifies the text color of the component's placeholder.
--calcite-input-number-text-color	Specifies the component's text color.
--calcite-input-number-text-color-focus	Specifies the component's text color when focused.
--calcite-input-prefix-size	When `prefixText` is provided, specifies the width of the component's prefix element.
--calcite-input-prefix-text-color	When `prefixText` is provided, specifies the text color of the component's prefix element.
--calcite-input-suffix-size	When `suffixText` is provided, specifies the width of the component's suffix element.
--calcite-input-suffix-text-color	When `suffixText` is provided, specifies the text color of the component's suffix element.

Events

Name	Description	Behavior
calciteInputNumberChange	Fires each time a new `value` is typed and committed.	bubblescomposed
calciteInputNumberInput	Fires each time a new `value` is typed.	bubblescomposedcancelable

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
selectText	Selects the text of the component's `value`.	`selectText(): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`