import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

## Usage

**NumberInput** are used to let the user enter a number. They include built-in validation to reject non-numerical entries. They provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.

- Enable the user to also choose to type a number in the field.
- Ensure that a default value is shown within the field.
- Use a clear and concise label for the number input.
- Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) for the label.

#### When not to use

- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that require only a few clicks.

## Reference

[Carbon Design System Usage for number input](https://www.carbondesignsystem.com/components/number-input/usage)

<!--
### Usage with react
```js
import { NumberInput } from '@wfp/ui';
```

```js
<NumberInput name="inputname" />
```
-->
