> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/numberinput.md).
# NumberInput
NumberInput is a wrapper over TextInput and used to enter numeric values. It is also possible to enter non-integer values. Via special props you can also change the format of numbers to enter numbers in a convenient format for the user.
```tsx
import { NumberInput } from 'altrone-ui';
const [value, setValue] = useState(0);
return
```
## Under the hood
Altrone uses `react-number-format` library for numeric input. This library provides big number of properties for formatting numbers, like `allowNegative`, `decimalSeparator` and etc.
Because NumberInput is a wrapper over [TextInput](/altrone-ui/components/forms/textinput.md) it uses `NumericFormat` component from `react-number-format` as custom `Component` of TextInput.
Check the documentation of `react-number-format` to get more information about the library:
{% embed url="" fullWidth="false" %}
## Useful features
This component provides some useful features to make your work with numbers easier. In the right side of the input you can see a button with two arrows. If you click on one of these buttons you can increase or decrease the value of the field. Using the `step` property, you can determine how much the value will change with each click.
In **Altrone 1.3** was added multipliers for NumberInput. User can click on the button with pressed `Alt` to increase or decrease the value into 10 times or with pressed `Shift` to increase or decrease the value into 100 times.
To disable special features for numbers you have to pass `false` into `showControls` prop.
## Altrone Options
{% hint style="info" %}
This feature was added in **Altrone 2.1**
{% endhint %}
In **Altrone 2.1**, a new feature (called as [Altrone Options](/altrone-ui/usage.md)) was introduced, allowing users to define default values for certain properties within this component. To achieve this, you can leverage either `numberInput.useFormatFromLocale`, to determines the grouping and decimal delimiters based on the current locale for all NumberInputs throughout your application.
## Properties
| Property | Type | Description |
| --------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| **`value`****`*`** | `string` | Inputed value |
| **`onChange`****`*`** | `(value: string) => void` | Callback is called when user changed the value in the text field |
| **`placeholder`** | `string` | Placeholder of the input |
| **`leftIsland`** | [`InputIsland`](#inputisland) | Left TextInput Island |
| **`rightIsland`** | [`InputIsland`](#inputisland) | Right TextInput Island. Don't work when `showControls` is `true` |
| **`prefix`** | `string` | Shortcut for `text` TextInput Island on the left side |
| **`suffix`** | `string` | Shortcut for `text` TextInput Island on the right side. Don't work when `showControls` is `true` |
| **`leftIcon`** | `JSX.Element` | Shortcut for `icon` TextInput Island on the left side |
| **`rightIcon`** | `JSX.Element` | Shortcut for `icon` TextInput Island on the left side. Don't work when `showControls` is `true` |
| **`errorText`** | `string` | Error message for TextInput |
| **`hintText`** | `string` | Hint message for TextInput |
| **`size`** | [`Size`](/altrone-ui/utils/enums/size.md) | Size of the text input |
| **`disabled`** | `boolean` | Marks input as disabled |
| **`required`** | `boolean` | Marks input as required |
| **`showControls`** | `boolean` | Shows special actions for PasswordInput instead of right island. Default value is `true` |
| **`allowNegative`** | `boolean` | Allow to enter negative numbers to the input. Default value is `false` |
| **`allowLeadingZeros`** | `boolean` | Allow to enter leading zero. Default value is `false` |
| **`decimalSeparator`** | `string` | Separator between integer and decimal parts of the number. Default value is `","` |
| **`thousandSeparator`** ** ****new** | `string` | Separator between number groups. Default value is `" "`. |
| **`digitsAfterDecimal`** | `number` | Maximum number of digits after decimal. Default value is `0` |
| **`min`** | `number` | Minimum value. Default value is undefined |
| **`max`** | `number` | Maximum value. Default value is undefined |
| **`step`** | `number` | Step for increase and decrease buttons. Default value is `1` |
| **`Component`** | `JSX.Element` | Custom html input element |
| **`surface`** | [`Surface`](/altrone-ui/utils/enums/surface.md) | Surface of the input |
| **`elevation`** | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of the input |
| **`classNames`** | `{ control?: string }` | Custom CSS class |
## History
* **`Altrone 2.0`**:
* added `surface` prop
* added `elevation` prop
* **`Altrone 1.3`**:
* added opportunity to apply multipliers to the step when user clicks on increase or decrease button with pressed `Alt` and `Shift` button
* **`Altrone 1.0`**: initial release