@licuido-ui/ui_textarea-autosize NPM

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

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

alt text

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

4.0.5

8 months ago