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 max and min, as well as limit the values with its min and max properties.
Usage
- Number submissions in forms
Sample
Accessibility
Keyboard navigation
| 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. | "center" | "end" | "start" | "start" |
| 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, a clear button is displayed when the component has a value. | boolean | false |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | false |
| form | form | The 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 | |
| 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. | boolean | string | |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| integer | integer | When true, restricts the component to integer numbers only and disables exponential notation. | boolean | false |
| label | label | Accessible name for the component's button or hyperlink. | string | |
| labelText | label-text | When provided, displays label text on the component. | string | |
| loading | loading | When true, the component is in the loading state and calcite-progress is displayed. | boolean | false |
| max | max | When the component resides in a form, specifies the maximum value. | number | |
| maxLength | max-length | number | ||
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| min | min | When the component resides in a form, specifies the minimum value. | number | |
| minLength | min-length | 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. | "horizontal" | "none" | "vertical" | "vertical" |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
| placeholder | placeholder | Specifies placeholder text for the component. | string | |
| prefixText | prefix-text | Adds text to 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. | "l" | "m" | "s" | "m" |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | "idle" |
| step | step | Specifies the granularity that the component's value must adhere to. | "any" | number | |
| suffixText | suffix-text | Adds text to the end of the component. | string | |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
| validity | The 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;
} | ||
| value | value | The component's value. | string |
Slots
| Name | Description |
|---|---|
| action | A slot for positioning a calcite-action or other interactive content. |
| 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 | Specifies the background color of the loading element. |
| --calcite-input-loading-fill-color | Specifies the fill color of the loading element. |
| --calcite-input-number-background-color | Specifies the background color of the component. |
| --calcite-input-number-border-color | Specifies the border color of the component. |
| --calcite-input-number-corner-radius | Specifies the border radius of the component. |
| --calcite-input-number-icon-color | Specifies the component's icon color. |
| --calcite-input-number-height | Specifies the height of the component. |
| --calcite-input-number-placeholder-text-color | Specifies the text color of the placeholder in the component. |
| --calcite-input-number-text-color | Specifies the text color of the component. |
| --calcite-input-number-text-color-focus | Specifies the text color of the component when focused. |
| --calcite-input-prefix-background-color | Specifies the background color of the prefix element. |
| --calcite-input-prefix-size | Specifies the width of the prefix element. |
| --calcite-input-prefix-text-color | Specifies the text color of the prefix element. |
| --calcite-input-suffix-background-color | Specifies the background color of the suffix element. |
| --calcite-input-suffix-size | Specifies the width of the suffix element. |
| --calcite-input-suffix-text-color | Specifies the text color of the suffix element. |
Events
| Name | Description | Behavior |
|---|---|---|
| calciteInputNumberChange | Fires each time a new value is typed and committed. | |
| calciteInputNumberInput | Fires each time a new value is typed. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| selectText | Selects the text of the component's value. | selectText(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |