> 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/text-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:                  |
| error            | boolean        | :x:                  |
| errorMessage     | string         | :x:                  |
| disabled         | boolean        | :x:                  |
| readOnly         | boolean        | :x:                  |
| maxLength        | number         | :x:                  |
| lettersOnly      | boolean        | :x:                  |
| alphanumericOnly | boolean        | :x:                  |
| onBlur           | function event | :x:                  |
| onChange         | function event | :x:                  |
| onFocus          | function event | :x:                  |

### 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.

```jsx
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](/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-text-input--basic-input>" %}