TextAreaAutoSize

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

Author

• @author Thilagaraj [email protected]

Link

Story Book Link TextAreaAutoSize

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_input-field

Import component

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

Usage

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

Image

Sample Code

<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:

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'
};