Code

Props

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

maxLength, lettersOnly and alphanumericOnly

• maxLength: limitates the max number of characteres allowed on the input.

• lettersOnly: Users can only type letters and no special characteres or nnumbers.

• alphanumericOnly: users can type letters and numbers and no special symbols.

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 {TextInput} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [value, setValue] = useState('');
    
    const updateState = (e)=>{
        setValue(e.value);
    }
    
    return(
        <div className='container'>
            <TextInput 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

Form Controls / Text Input - Basic Input ⋅ Storybooksipster-react-component-storybook.netlify.app