# InputNumber

InputNumber is used in forms that accept numbers as an answer.

## Design & usage guidelines

This is best suited for input data that benefits from being modified in
increments, such as quantity, price, or days (ie 2 days -> 3 days).

While some types of data may technically be numbers, they can be ill-suited for
using a number input. For example, phone numbers and credit card numbers provide
no value to the user by offering an incrementer.

## Clearable

InputNumber does not show a clear button. The component enforces
`clearable="never"` to align with numeric, increment/decrement-focused usage.


## Configuration

## Using onValidation

If you need to capture the error message and render it outside of the component.
Read the [InputValidation](../InputValidation/InputValidation.md) documentation.

For more details about `validation` using `Input` components, see the
[InputText](../InputText/InputText.md) documentation.


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
| `autocomplete` | `AutocompleteTypes | boolean` | No | — | Determines if browser form autocomplete is enabled. Note that "one-time-code" is experimental and should not be used ... |
| `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value.  You should always use `while-editing` if you want the input t... |
| `defaultValue` | `Date | string` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
| `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
| `disabled` | `boolean` | No | — | Disable the input |
| `id` | `string` | No | — | A unique identifier for the input. |
| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
| `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
| `keyboard` | `"decimal" | "numeric"` | No | — | Determines what kind of keyboard appears on mobile web. |
| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
| `max` | `number` | No | — | Specifies the maximum numerical or date value that a user can type |
| `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
| `min` | `number` | No | — | Specifies the minimum numerical or date value that a user can type |
| `name` | `string` | No | — | Name of the input. |
| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
| `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
| `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
| `ref` | `Ref<InputNumberRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
| `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
| `value` | `number` | No | — | Set the component to the given value. |
| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. |
