import { useState } from 'react'
import NumberInput from '../NumberInput'
import Div from '../../Div'
import Br from '../../Br'
import { Sandbox } from '@startupjs/docs'
# NumberInput
NumberInput позволяет пользователю вводить или изменять число.
```jsx
import { NumberInput } from '@startupjs/ui'
```
## Простой пример
```jsx example
const [value, setValue] = useState()
return (
)
```
## Disabled
```jsx example
return (
)
```
## Readonly
```jsx example
return (
)
```
## Шаг
Шаг указывает сколько знаков после запятой можно ввести, задается числами 1, 0.1, 0.01 и тд в свойстве `step` (1 по умолчанию).
```jsx example
const [value, setValue] = useState()
return (
)
```
## Минимальное и максимальное значения
Минимальное и максимальное значения задаются свойствами 'min' и 'max'
```jsx example
const [value, setValue] = useState()
return (
)
```
## Кнопки
Кнопки позволяют изменять число по заданному шагу. Положение кнопок можно изменить передав в компонент свойство `buttonsMode` со значением `vertical` или `horizontal` (`vertical` по умолчанию) или спрятать передав в компонент свойство `buttonsMode` со значением `none`.
```jsx example
const [valueVertical, setValueVertical] = useState()
const [valueHorizontal, setValueHorizontal] = useState()
const [valueNone, setValueNone] = useState()
return (
)
```
## Размеры
Размер может быть изменен с помощью свойства `size`. Размер по умолчанию - `m`
```jsx example
const [valueL, setValueL] = useState()
const [valueM, setValueM] = useState()
const [valueS, setValueS] = useState()
return (
)
```
## Стилизация
Для стилизация можно применить свойства:
- `style` - для стилизации корневого компонента
- `inputStyle` - для стилизации поля ввода
- `buttonStyle` - для стилизации кнопок
```jsx example
const [value, setValue] = useState()
return (
)
```
## Единицы измерения
Свойство `units` отображает единицы измерения поля. По умолчанию единицы измерения отображаются слева от поля. Используйте `unitsPosition='right'` для отображения единиц измерения в правой части поля.
```jsx example
const [value, setValue] = useState()
return (
)
```
## Sandbox