Code

Props

Props	Data Type	Required
value	string	❌
id	string	✅
className	string	❌
name	string	❌
placeholder	string	❌
label	string	❌
info	string	❌
helptext	string	❌
maxLength	number
wholeNumbersOnly	boolean
error	boolean	❌
errorMessage	string	❌
disabled	boolean	❌
hideButtons	boolean	❌
readOnly	boolean	❌
onBlur	function event	❌
onChange	function event	❌
onFocus	function event	❌

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.

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

• Telicon

Live Demo

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

React

Storybook