Code

Props

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

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

const Example = ()=>{
    const [textarea, setTextarea] = useState('');
    
    const updateState = (e)=>{
        setTextarea(e.value);
    }
    
    return(
        <div className='container'>
            <Textarea 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 / Textarea - Basic Textarea ⋅ Storybooksipster-react-component-storybook.netlify.app