npm package: @licuido-ui/ui_textarea-autosize
Description: TextAreaAutoSize fields are an essential user interface design element, providing users with the means to enter non-standardized responses
Latest version: 4.0.5

# TextAreaAutoSize

TextAreaAutoSize fields are an essential user interface design element, providing users with the means to enter non-standardized responses

### Author

- @author Thilagaraj <thilag@crayond.co>

## Link

[Story Book Link TextAreaAutoSize ](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_input-field
```

## Import component

```jsx
import { TextAreaAutoSize } from '@licuido-ui/ui_input-field';
```

## Usage

```jsx
<TextAreaAutoSize label={'input'} value={''} />
```


## Image

![alt text](./textareaautosize.png)

## Sample Code
```jsx
<TextAreaAutoSize 
    fullWidth={true}
    variant={'outlined'}
    size={'small'}
    label={''}
    type={'text'}
    id={''}
    value={''}
    rowMax={Infinity}
    rowMin={1}
    isError={''}
    disabled={false}
    fullwidth={false}
    isMulti={false}
    isReadOnly={false}
    helperText={''}
    placeholder={''}
    className={''}
    endAdornment={null}
    defaultValue={null}
    inLineStyles={{}}
    startAdornments={null}
    onChange={undefined}  
  />

```
| **Prop**            | **Type**         | **Description**                                                                     |
| ------------------- | ---------------- | ----------------------------------------------------------------------------------- |
| **inputId**         | string           | This id is unique.                                                                  |
| **className**       | string           | Override or extend the styles applied.                                              |
| **sx**              | object           | System overrides and additional CSS styles.                                         |
| **label**           | string           | To change label text.                                                               |
| **isReadOnly**      | boolean          | Prevents the user from changing the value of the field.                             |
| **variant**         | 'outlined'       | 'standard'                                                                          | 'filled' | Declare variant types. |
| **value**           | unknown          | The input value. Providing an empty string will select no options.                  |
| **rowMax**          | number           | Maximum number of rows to display when multiline option is set to true.             |
| **rows**            | string \| number | Number of rows to display when multiline option is set to true.                     |
| **rowMin**          | number           | Minimum number of rows to display when multiline option is set to true.             |
| **disabled**        | boolean          | If true, the component is disabled.                                                 |
| **fullWidth**       | boolean          | If true, the input will take up the full width of its container.                    |
| **isMulti**         | boolean          | If true, a TextareaAutosize element is rendered.                                    |
| **placeholder**     | string           | To change placeholder text.                                                         |
| **fullWidth**       | boolean          | If true, the input will take up the full width of its container.                    |
| **defaultValue**    | unknown          | Default value when the component is not controlled.                                 |
| **inLineStyles**    | object           | System overrides and additional CSS styles.                                         |
| **onChange**        | function         | Callback fired when the value is changed.                                           |
| **inputStyle**      | object           | System overrides and additional CSS styles for the input.                           |
| **multiline**       | boolean          | If true, a `textarea` element is rendered instead of an input.                      |
| **required**        | boolean          | If true, the label is displayed as required, and the input element is required.     |
| **isErrorRequired** | boolean          | If true, the label is required in case of an error.                                 |
| **errorMessage**    | string           | Error message text.                                                                 |
| **isError**         | string           | State class applied to the root element if error.                                   |
| **error**           | boolean          | If true, an error state is displayed.                                               |
| **startAdornment**  | any              | Class applied to the startAdornment Props using a start Icon of the TextField.      |
| **endAdornment**    | any              | Class applied to the endAdornment Props using an end Icon of the TextField.         |
| **errorVariant**    | any              | error variant applied to the variant Props using an errorVariant of the Typography. |

**Default Props:**
```jsx
TextAreaAutoSize.defaultProps = {
  label: '',
  variant: 'outlined',
  inputId: 'TextAreaAutoSize',
  value: '',
  rows: 5,
  fullWidth: false,
  multiline: false,
  rowMax: Infinity,
  rowMin: 1,
  disabled: false,
  fullwidth: false,
  isMulti: false,
  isReadOnly: false,
  placeholder: '',
  className: '',
  defaultValue: undefined,
  onChange: undefined,
  required: false,
  errorMessage: '',
  isError: '',
  fontSizeTextArea: '14px',
  textAreaPaddingFilledInput: '24px 16px 16px 16px',
  paddingYAxis: '4px 8px',
  lineHeightTextArea: '20px',
  fontWeightTextArea: 500,
  borderRadiusTextArea: '8px',
  borderTextArea: '1px solid',
  borderColorTextArea: '#E9E9E9',
  backgroundTextArea: '#fff !important',
  lableColor: '#4E585E',
  lableFontSize: '14px',
  lableFontWeight: 400,
  labelLineHeight: '20px',
  errorVariant: 'caption'
};