import { useState } from 'react'
import NumberInput from '../NumberInput'
import Div from '../../Div'
import Br from '../../Br'
import { Sandbox } from '@startupjs/docs'

# NumberInput

NumberInput allows user to enter or edit number.

```jsx
import { NumberInput } from '@startupjs/ui'
```

## Simple example

```jsx example
const [value, setValue] = useState()
return (
  <NumberInput
    value={value}
    onChangeNumber={setValue}
  />
)
```

## Disabled

```jsx example
return (
  <NumberInput
    disabled
    value={10}
  />
)
```

## Readonly

```jsx example
return (
  <NumberInput
    readonly
    value={10}
  />
)
```

## Step

The step specifies how many decimal places can be entered, set by the numbers 1, 0.1, 0.01, etc. in the `step` property (1 by default).

```jsx example
const [value, setValue] = useState()
return (
  <Div>
    <NumberInput
      value={value}
      step={0.001}
      onChangeNumber={setValue}
    />
  </Div>
)
```

## Minimum and maximum value

The minimum and maximum values are set by the `min` and `max` properties

```jsx example
const [value, setValue] = useState()
return (
  <Div>
    <NumberInput
      value={value}
      min={-30}
      max={20}
      onChangeNumber={setValue}
    />
  </Div>
)
```

## Buttons mode

Buttons allow user to change the number at the specified step. The position of the buttons can be changed by passing the `buttonsMode` property with the value `vertical` or `horizontal` (`vertical` by default) to the component or hidden by passing the `buttonsMode` property with the value `none` to the component.

```jsx example
const [valueVertical, setValueVertical] = useState()
const [valueHorizontal, setValueHorizontal] = useState()
const [valueNone, setValueNone] = useState()
return (
  <Div>
    <NumberInput
      buttonsMode='vertical'
      value={valueVertical}
      onChangeNumber={setValueVertical}
    />
    <Br />
    <NumberInput
      buttonsMode='horizontal'
      value={valueHorizontal}
      onChangeNumber={setValueHorizontal}
    />
    <Br />
    <NumberInput
      buttonsMode='none'
      value={valueNone}
      onChangeNumber={setValueNone}
    />
  </Div>
)
```

## Sizes

Size can be modified using the `size` prop. Default size is `'m'`.

```jsx example
const [valueL, setValueL] = useState()
const [valueM, setValueM] = useState()
const [valueS, setValueS] = useState()
return (
  <Div>
    <NumberInput
      size='s'
      value={valueS}
      onChangeNumber={setValueS}
    />
    <Br />
    <NumberInput
      size='m'
      value={valueM}
      onChangeNumber={setValueM}
    />
    <Br />
    <NumberInput
      size='l'
      value={valueL}
      onChangeNumber={setValueL}
    />
  </Div>
)
```

## Units

The `units` property displays the units of the input. By default, units are displayed to the left of the input. Use `unitsPosition='right'` to display the units on the right side of the input.

```jsx example
const [value, setValue] = useState()
return (
  <NumberInput
    value={value}
    units='$'
    onChangeNumber={setValue}
  />
)
```

## Stylization

For stylization can apply the properties:

- `style` - to style the root component
- `inputStyle` - to style the input
- `buttonStyle` - for styling buttons

```jsx example
const [value, setValue] = useState()

return (
  <NumberInput
    style={{
      width: 250
    }}
    buttonStyle={{
      borderWidth: 0
    }}
    inputStyle={{
      borderTopWidth: 0,
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderRadius: 0
    }}
    placeholder='Enter number'
    value={value}
    onChangeNumber={setValue}
  />
)
```

## Sandbox

<Sandbox
  Component={NumberInput}
  extraParams={{
    step: {
      step: 0.0001
    },
    value: {
      step: 0.0001
    }
  }}
  block
/>