@licuido-ui/ui_input-field NPM

InputField

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

Author Input

@author Hariharan hariharan@crayond.co

Author Add Filled Variant Input

@author Thilagaraj thilag@crayond.co

Link

Story Book Link InputField

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_input-field

Import component

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

Usage

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

Image

alt text

Sample Code

<InputField 
    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	Default
inputId	`string`	This id is unique.	-
label	`string \| undefined`	To change label text.	`''`
value	`unknown`	The input value. Providing an empty string will select no options.	-
className	`string`	Override or extend the styles applied.	`''`
sx	`SxProps<Theme>`	Allows defining system overrides as well as additional CSS styles.	`{}`
variant	`'outlined' \| 'standard' \| 'filled'`	To change declare variant types.	`'outlined'`
labelStyle	`SxProps`	Allows defining system overrides as well as additional CSS styles for the label.	See `defaultProps`
labelVariant	`'standard' \| 'floating'`	To change label variant.	`'standard'`
errorMessage	`string`	To change error message text.	-
inputStyle	`SxProps`	Allows defining system overrides as well as additional CSS styles for the input.	-
isLabelRequired	`boolean`	If true, the label is required.	`true`
isErrorRequired	`boolean`	If true, the error message is required.	`true`
borderFilled	`string`	If can you change a `borderFilled`, the `borderFilled` is required.	`'1px solid'`
borderColorFilled	`string`	If can you change a `borderColorFilled`, the `borderColorFilled` is required.	`'#D9DBDD'`
borderRadiusFilled	`string`	If can you change a `borderRadiusFilled`, the `borderRadiusFilled` is required.	`'8px'`
filledHeight	`string`	If can you change a `filledHeight`, the `filledHeight` is required. It can be used as a string.	`'62px'`
filledLabelPadding	`string`	If can you change a `filledLabelPadding`, the `filledLabelPadding` is required. It can be used as a string.	`'4px'`
fontSizeFilled	`string`	If can you change a `fontSizeFilled`, the `fontSizeFilled` is required.	`'14px'`
fontWeightFilled	`number \| string \| undefined`	If can you change a `fontWeightFilled`, the `fontWeightFilled` is required.	`500`
errorStyle	`SxProps`	Allows defining system overrides as well as additional CSS styles for the error message.	See `defaultProps`
errorVariant	`string`	If can you change a Variant, the errorVariant is required	`caption`

Default Props:

{
  label: '',
  type: 'text',
  variant: 'outlined',
  inputId: 'InputField',
  value: '',
  size: undefined,
  className: '',
  labelStyle: {
    'fontSize': '12px',
    'marginRight': '5px',
    'marginBottom': '8px',
    'color': '#3B3B3B',
    'fontWeight': 400,
    'lineHeight': '20px',
    '& span': {
      color: '#F44F5A',
    },
  },
  errorStyle: {
    'mt': 0.5,
    'mb': 0,
    'caret-color': 'transparent',
  },
  borderFilled: '1px solid',
  borderColorFilled: '#D9DBDD',
  borderRadiusFilled: '8px',
  filledHeight: '62px',
  filledLabelPadding: '4px',
  fontWeightFilled: 500,
  fontSizeFilled: '14px',
  labelVariant: 'standard',
  errorMessage: '',
}

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

@licuido-ui/ui_login @licuido-ui/ui_profile @licuido-ui/ui_render-form @licuido-ui/ui_role-management @licuido-ui/ui_sign-up @licuido-ui/react @licuido-ui/ui_billing-payment

4.0.3

8 months ago