> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/form-controls/number-input/code.md).

# Code

## Props

| Props            | Data Type      | Required             |
| ---------------- | -------------- | -------------------- |
| value            | string         | :x:                  |
| id               | string         | :white\_check\_mark: |
| className        | string         | :x:                  |
| name             | string         | :x:                  |
| placeholder      | string         | :x:                  |
| label            | string         | :x:                  |
| info             | string         | :x:                  |
| helptext         | string         | :x:                  |
| maxLength        | number         |                      |
| wholeNumbersOnly | boolean        |                      |
| error            | boolean        | :x:                  |
| errorMessage     | string         | :x:                  |
| disabled         | boolean        | :x:                  |
| hideButtons      | boolean        | :x:                  |
| readOnly         | boolean        | :x:                  |
| onBlur           | function event | :x:                  |
| onChange         | function event | :x:                  |
| onFocus          | function event | :x:                  |

### maxLength and wholeNumbersOnly

* **maxLength:** limitates the max number of characteres allowed on the input.
* **wholeNumbersOnly:** By default, numberInput accepts decimal numbers, but at using this prop users can only type whole numbers.

### Event Response

| Property | Data Type |
| -------- | --------- |
| id       | string    |
| name     | string    |
| label    | string    |
| value    | string    |

### onBlur, onChange, onFocus

For this example it is going to be use the onChange event, but the same logic can be applied to the other events.

```jsx
import React, {useState} from 'react';
import {NumberInput} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [value, setValue] = useState('');
    
    const updateState = (e)=>{
        setValue(e.value);
    }
    
    return(
        <div className='container'>
            <NumberInput id='textarea' onChange={updateState} />
        </div>
    )
}
```

## Components Dependency

For this component elaboration there were used the following internal components:

* [Label](/sds/sds-components/form-controls/label.md)
* [Telicon](/sds/sds-components/simple-components/telicon.md)

## Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fform-controls-number-input--basic-input>" %}